/* DigitalKasse public pages (home, start, 404, kontakt). Petrol ink on sage-mist, thermal paper for receipts,
   one Austrian red. Display type: Big Shoulders (condensed, so long German words fit). All fonts are served from this site. */

@font-face { font-family: "Shoulders"; src: url("assets/fonts/bigshoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("assets/fonts/instrument.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --bg: #eef2ef;
  --bg-2: #e2e9e5;
  --surface: #ffffff;
  --surface-2: #f5f8f6;
  --ink: #0a2328;
  --ink-2: #294a4f;
  --muted: #4f676b;
  --line: #c7d4cf;
  --line-2: #a9bcb6;
  --red: #c8102e;
  --red-ink: #a50d26;
  --red-soft: #fbe8eb;
  --ok: #117a5a;
  --ok-soft: #dcf2e7;
  --wait: #8f5400;
  --wait-soft: #fbf0dc;
  --info: #24548f;
  --info-soft: #e3ecf7;
  --paper: #fbfaf5;
  --paper-ink: #1a2326;
  --cine: #06191d;
  --cine-2: #0d262a;
  --cine-ink: #e8f0ed;
  --cine-ink-2: #c4d4d0;
  --cine-muted: #98b1ad;
  --cine-line: #1f3a3e;
  --cine-line-2: #2f4d52;
  --shadow: 0 1px 0 rgba(10, 35, 40, .04), 0 18px 40px -22px rgba(10, 35, 40, .35);
  --display: "Shoulders", "Instrument", system-ui, sans-serif;
  --body: "Instrument", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "Plex Arabic", "Instrument", "Segoe UI", Tahoma, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap: 1160px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b2125; --bg-2: #0f292d; --surface: #112e33; --surface-2: #16363b; --ink: #e6f0ed; --ink-2: #c4d4d0;
    --muted: #98b1ad; --line: #22424a; --line-2: #345a60; --red: #ff5d6e; --red-ink: #ff8a96; --red-soft: #3a1820;
    --ok: #45cf96; --ok-soft: #12302a; --wait: #f2b552; --wait-soft: #33281a; --info: #8fb6ec; --info-soft: #172a42;
    --paper: #e9ece6; --paper-ink: #142024; --cine: #04141a; --cine-2: #0b2227;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
/* Dark bands (the film, the 2026 law, the final call) and the header swap the tokens instead of restyling every child. */
.cine, .top { --bg: var(--cine); --bg-2: var(--cine-2); --surface: var(--cine-2); --surface-2: #123236; --ink: var(--cine-ink); --ink-2: var(--cine-ink-2);
  --muted: var(--cine-muted); --line: var(--cine-line); --line-2: var(--cine-line-2); --red: #e4203f; --red-ink: #ff6b7d; --red-soft: #3a1820;
  --ok: #45cf96; --ok-soft: #12302a; --info: #8fb6ec; --info-soft: #172a42; --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 24px 50px -20px rgba(0, 0, 0, .7); }
.cine { background: var(--cine); color: var(--cine-ink); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
html[lang="ar"] body { font-family: var(--arabic); font-size: 17.5px; line-height: 1.75; }
a { color: inherit; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
[data-lang] { display: none !important; }
html[lang="de"] [data-lang="de"], html[lang="ar"] [data-lang="ar"] { display: revert !important; }
.cta-short { display: none; }
[hidden], html[lang] [hidden] { display: none !important; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
@media (max-width: 420px) { .wrap { width: calc(100% - 32px); } }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .004em; line-height: .96; margin: 0; text-wrap: balance; }
h3 { font-weight: 750; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--arabic); letter-spacing: 0; line-height: 1.3; font-weight: 700; }
p { margin: 0; }

/* ---------------------------------------------------------------- brand mark */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .01em; }
.brand svg { width: 32px; height: 32px; flex: none; }
html[lang="ar"] .brand { font-family: var(--display); }
.brand .m-bg { fill: var(--ink); }
.brand .m-paper { fill: var(--bg); }
.brand .m-red { stroke: var(--red); stroke-width: 2; fill: none; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-weight: 650; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--ink-2); }
.btn-line { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-ink); }
@media (prefers-color-scheme: dark) { .btn-red { color: #1a0a0d; } }
.cine .btn-red { color: #fff; }
.cine .btn-red:hover { background: #c8102e; }
.btn-sm { min-height: 40px; padding: 0 15px; font-size: 15px; border-radius: 10px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--cine) 88%, transparent); color: var(--cine-ink); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--cine-line); }
.top::before { content: ""; display: block; height: 3px; background: linear-gradient(var(--red) 0 0) 0 0 / 100% 1px no-repeat, linear-gradient(var(--red) 0 0) 0 2px / 100% 1px no-repeat; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.top nav.links { display: flex; gap: 22px; font-size: 15.5px; margin-inline-start: 8px; }
.top nav.links a { text-decoration: none; color: var(--ink-2); padding: 6px 0; }
.top nav.links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.top .end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; padding: 2px; }
.lang button { border: 0; background: transparent; color: var(--ink-2); font-size: 14px; padding: 5px 10px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.lang button[data-set="ar"] { font-family: var(--arabic); }
@media (max-width: 1020px) { .top nav.links { display: none; } }
@media (max-width: 560px) {
  .top .wrap { gap: 10px; }
  .top .end .hide-s { display: none; }
  .cta-long { display: none; }
  .cta-short { display: inline !important; }
  .brand { font-size: 18px; }
}

/* ---------------------------------------------------------------- hero: the film */
.hero.film { padding: 0; overflow: clip; }
.film-track { position: relative; }
.film-view { padding: 44px 0 36px; }
.film-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 48px; align-items: center; }
html[lang="ar"] .kicker { font-family: var(--arabic); letter-spacing: 0; }
.film-copy .kicker { font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em; color: var(--muted); margin-bottom: 18px; }
.hero h1 { font-size: clamp(48px, 5.4vw, 76px); max-width: 12ch; }
html[lang="ar"] .hero h1 { font-size: clamp(38px, 4.8vw, 64px); max-width: 13ch; }
.hero .lead { font-size: 17px; color: var(--ink-2); margin-top: 22px; max-width: 30em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); }
.hero .facts li { display: flex; align-items: center; gap: 8px; }
.hero .facts li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--muted); transform: rotate(45deg); }
.film-stage { position: relative; min-width: 0; container-type: inline-size; }
.demo { container-type: inline-size; position: relative; }
.film { --pr: 0; }
/* scrub mode: the viewport is pinned and the scroll position plays the film */
.film.scrub .film-track { height: 760vh; }
.film.scrub .film-view { position: sticky; top: 0; height: 100vh; padding: 84px 0 20px; display: flex; align-items: center; overflow: hidden; }
.film.scrub .film-grid { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
@media (max-height: 860px) {
  .hero.film.scrub h1 { font-size: clamp(40px, 4.6vw, 62px); }
  html[lang="ar"] .hero.film.scrub h1 { font-size: clamp(32px, 3.6vw, 48px); }
  .film.scrub .lead { font-size: 15.5px; margin-top: 14px; }
  .film.scrub .actions { margin-top: 18px; }
  .film.scrub .facts { margin-top: 14px; font-size: 13.5px; }
  .film.scrub .kicker { margin-bottom: 10px; }
  .film.scrub .film-view { padding-top: 76px; }
  .film.scrub .film-stage { max-width: calc((100vh - 250px) * 58 / 38); }
  .film.scrub .chap { min-height: 60px; padding-top: 7px; }
  .film.scrub .printer { top: calc(-10px - var(--pr) * 40px); }
}
.film.scrub .film-stage { width: 100%; max-width: calc((100vh - 290px) * 58 / 38); justify-self: center; }
.film.scrub .stage { transform: scale(calc(1 - var(--pr) * .1)); opacity: calc(1 - var(--pr) * .9); transform-origin: 50% 70%; will-change: transform, opacity; }
.film.scrub .printer { position: absolute; left: 50%; top: calc(-10px - var(--pr) * 64px); width: min(380px, 54cqi); margin: 0; transform: translateX(-50%); opacity: calc(min(1, var(--pr) * 6)); pointer-events: none; z-index: 5; }
.film.scrub .printer .receipt { font-size: max(9px, min(11.5px, 100cqi / 60, (100vh - 240px) / 46)); line-height: 1.42; padding: 20px 20px 28px; transform: translateY(calc(-103% + var(--pr) * 103%)); animation: none !important; will-change: transform; }
.film.scrub .printer .feed { padding-bottom: 20px; }
.film.scrub.end .demo-caption { opacity: 0; }
.scroll-cue { display: none; flex: none; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 4px; }
html[lang="ar"] .scroll-cue { font-family: var(--arabic); }
.scroll-cue i { width: 14px; height: 22px; border: 1.5px solid var(--line-2); border-radius: 8px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 4px; width: 3px; height: 5px; margin-left: -1.5px; border-radius: 2px; background: var(--red-ink); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 50% { transform: translateY(7px); opacity: .3; } }
.film.scrub .scroll-cue { display: inline-flex; }
.film.scrub.end .scroll-cue { opacity: 0; }
.film.scrub .demo-caption { transition: opacity .3s; }
.film:not(.scrub) .printer { margin: 36px auto 0; }
.film:not(.scrub) .film-grid { align-items: start; }
@media (min-width: 961px) { .film:not(.scrub) .film-copy { position: sticky; top: 100px; padding-top: 24px; } }
.film:not(.scrub) .film-stage .printer { width: min(400px, 100%); }
/* chapters */
.chapters { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.chap { position: relative; display: grid; gap: 3px; align-content: start; justify-items: start; text-align: start; padding: 10px 8px 8px; border: 0; border-top: 2px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; min-height: 72px; transition: color .2s, border-color .2s; }
.chap .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }
.chap b { font-family: var(--display); font-weight: 750; font-size: 18px; line-height: 1.02; letter-spacing: .01em; color: var(--ink); max-width: 100%; }
.chap small { font-size: 12.5px; color: var(--muted); }
.chap:hover { border-color: var(--ink-2); }
.chap[aria-pressed="true"] { border-color: var(--red); color: var(--ink); }
.chap[aria-pressed="true"] .n { color: var(--red-ink); }
.chap.end b { color: var(--red-ink); }
.chap:focus-visible { outline-offset: 0; border-radius: 4px; }
@media (max-width: 960px) {
  .film-view { padding-top: 28px; }
  .film-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: 12ch; font-size: clamp(50px, 14vw, 84px); }
  .chapters { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x proximity; }
  .chapters::-webkit-scrollbar { display: none; }
  .chap { flex: 0 0 auto; min-width: 128px; scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- live demo stage (all sizes in em, scaled to the container) */
.demo { container-type: inline-size; }
.stage { position: relative; font-size: calc(100cqi / 58); width: 100%; aspect-ratio: 58 / 38; font-family: var(--body); color: #172233; user-select: none; }
html[lang="ar"] .stage { font-family: var(--arabic); }
.laptop { position: absolute; inset-inline-start: 0; top: 0; width: 44em; }
.laptop .lid { background: #1b2433; border-radius: 1.2em 1.2em .3em .3em; padding: 1em 1em 1.2em; box-shadow: var(--shadow); }
.laptop .base { height: 1.3em; margin: 0 -2.2em; background: linear-gradient(#cdd5de, #a8b3bf); border-radius: 0 0 1.4em 1.4em; position: relative; }
.laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 7em; height: .5em; transform: translateX(-50%); background: #9aa6b3; border-radius: 0 0 .6em .6em; }
@media (prefers-color-scheme: dark) { .laptop .base { background: linear-gradient(#5b6779, #3c4656); } .laptop .base::before { background: #333c4a; } .laptop .lid { background: #05090f; } }
.app { height: 30em; background: #f4f6f9; border-radius: .35em; overflow: hidden; display: grid; grid-template-rows: 2.6em 1fr; font-size: 1em; }
.app-bar { display: flex; align-items: center; gap: .8em; padding: 0 1em; background: #fff; border-bottom: 1px solid #dfe5ec; font-size: .95em; }
.app-bar b { font-weight: 700; }
.app-bar .mk { width: 1.4em; height: 1.4em; border-radius: .35em; background: #0f1b2d; position: relative; }
.app-bar .mk::after { content: ""; position: absolute; inset: auto .3em .35em; height: .18em; background: #c8102e; }
.app-bar .sp { margin-inline-start: auto; display: flex; gap: .9em; align-items: center; color: #5b6676; }
.app-bar .on { display: inline-flex; align-items: center; gap: .35em; }
.app-bar .on::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #10a06b; }
.app-body { display: grid; grid-template-columns: 3.2em 1fr; min-height: 0; }
.app-rail { background: #0f1b2d; display: flex; flex-direction: column; align-items: center; gap: .9em; padding-top: 1em; }
.app-rail i { width: 1.3em; height: 1.3em; border-radius: .35em; background: #2b3a52; display: block; }
.app-rail i.cur { background: #fff; }
.view { padding: 1.1em 1.2em; min-width: 0; overflow: hidden; position: relative; }
.v-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: .8em; }
.v-h strong { font-size: 1.35em; font-weight: 700; font-family: var(--body); letter-spacing: -.01em; }
html[lang="ar"] .v-h strong { font-family: var(--arabic); }
.v-h span { color: #5b6676; font-size: .9em; }
.chip { display: inline-flex; align-items: center; gap: .35em; padding: .18em .6em; border-radius: .5em; font-size: .82em; font-weight: 650; white-space: nowrap; background: #e8edf3; color: #364256; transition: background-color .35s, color .35s; }
.chip.ok { background: #dcf2e7; color: #0b6b49; }
.chip.wait { background: #fbefd8; color: #845000; }
.chip.info { background: #e1ebf7; color: #1f4c86; }
.chip.new { background: #c8102e; color: #fff; }
.rows { display: grid; gap: .55em; }
.row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9em; background: #fff; border: 1px solid #e1e7ee; border-radius: .7em; padding: .55em .9em; line-height: 1.3; transition: border-color .3s, box-shadow .3s, transform .4s, opacity .4s; }
.row .id { font-family: var(--mono); font-size: .85em; color: #5b6676; }
.row .t b { display: block; font-size: 1em; }
.row .t small { color: #5b6676; font-size: .85em; }
.row.hl { border-color: #c8102e; box-shadow: 0 0 0 .2em rgba(200, 16, 46, .12); }
.row.enter { opacity: 0; transform: translateY(-.6em); }
.kbtn { display: inline-flex; align-items: center; justify-content: center; padding: .5em .9em; border-radius: .55em; background: #0f1b2d; color: #fff; font-weight: 650; font-size: .9em; white-space: nowrap; transition: transform .12s, background-color .2s; }
.kbtn.alt { background: #fff; color: #0f1b2d; border: 1px solid #c9d2dc; }
.kbtn.red { background: #c8102e; }
.kbtn.press { transform: scale(.94); }
.kbtn.done { background: #0b7a53; }
.split { display: grid; grid-template-columns: 1fr 11.5em; gap: 1em; height: 100%; }
.side { background: #fff; border: 1px solid #e1e7ee; border-radius: .7em; padding: .8em .9em; display: grid; gap: .5em; align-content: start; }
.side h5 { margin: 0; font-size: .85em; color: #5b6676; font-weight: 600; }
.stat { display: flex; justify-content: space-between; align-items: center; font-size: .92em; }
.stat b { font-family: var(--mono); font-size: 1.1em; }
.stat b.bump { animation: bump .6s; }
@keyframes bump { 40% { transform: scale(1.35); color: #c8102e; } }

/* tables (gastro) */
.tables { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; }
.tbl { aspect-ratio: 1.35; border-radius: .7em; background: #fff; border: 1px solid #dbe2ea; display: grid; place-items: center; align-content: center; gap: .1em; font-weight: 700; position: relative; }
.tbl small { font-weight: 500; font-size: .72em; color: #5b6676; }
.tbl.busy { background: #e1ebf7; border-color: #b9cde6; }
.tbl.bill { background: #fbefd8; border-color: #edd3a2; }
.tbl.qr { background: #c8102e; border-color: #c8102e; color: #fff; }
.tbl.qr small { color: #ffe3e7; }
.tbl.qr::after { content: ""; position: absolute; inset: -.35em; border: .15em solid #c8102e; border-radius: .9em; animation: ring 1.2s ease-out infinite; }
@keyframes ring { from { opacity: .8; transform: scale(.96); } to { opacity: 0; transform: scale(1.12); } }
.bon { background: #fff; border: 1px dashed #b7c2ce; border-radius: .4em; padding: .6em .7em; font-family: var(--mono); font-size: .82em; line-height: 1.5; transition: opacity .4s, transform .4s; }
.bon.enter { opacity: 0; transform: translateY(-.8em); }

/* calendar (friseur) */
.cal { display: grid; grid-template-columns: 3em 1fr 1fr; gap: 0 .5em; position: relative; height: 21em; }
.cal .hrs { display: grid; grid-template-rows: repeat(4, 1fr); font-family: var(--mono); font-size: .78em; color: #5b6676; padding-top: 1.8em; }
.cal .col { position: relative; border-inline-start: 1px solid #dfe5ec; }
.cal .col > b { display: block; height: 1.8em; font-size: .9em; padding-inline-start: .5em; }
.cal .lines { position: absolute; inset: 1.8em 0 0; background: repeating-linear-gradient(#0000 0 calc(25% - 1px), #e4e9ef calc(25% - 1px) 25%); }
.appt { position: absolute; inset-inline: .35em; border-radius: .5em; padding: .35em .5em; font-size: .8em; line-height: 1.3; background: #e1ebf7; color: #1f3d66; border-inline-start: .25em solid #3a6db0; transition: opacity .45s, transform .45s; }
.appt.web { background: #fde7ea; color: #7d0a1c; border-color: #c8102e; }
.appt.enter { opacity: 0; transform: translateY(-1.5em); }
.now-line { position: absolute; inset-inline: 2.6em 0; height: 0; border-top: .15em solid #c8102e; }

/* cart (handel) */
.cart { display: grid; grid-template-columns: 1fr 14em; gap: 1em; height: 100%; }
.scan { display: flex; align-items: center; gap: .6em; background: #fff; border: 1.5px solid #0f1b2d; border-radius: .6em; padding: .5em .8em; font-family: var(--mono); font-size: .85em; color: #5b6676; margin-bottom: .7em; }
.scan i { width: 1.2em; height: .9em; background: repeating-linear-gradient(90deg, #0f1b2d 0 .1em, #0000 .1em .2em); display: block; }
.lines-list { display: grid; gap: .35em; }
.ln { display: flex; justify-content: space-between; gap: 1em; background: #fff; border-radius: .5em; padding: .45em .7em; border: 1px solid #e1e7ee; font-size: .92em; transition: opacity .3s, transform .3s; }
.ln.enter { opacity: 0; transform: translateX(-1em); }
.ln span:last-child { font-family: var(--mono); }
.pay { background: #fff; border: 1px solid #e1e7ee; border-radius: .7em; padding: .9em; display: grid; gap: .6em; align-content: start; }
.pay .sum { font-family: var(--mono); font-size: 1.9em; font-weight: 600; text-align: end; }
.pay .kbtn { width: 100%; padding: .7em; }
.qrbox { display: grid; place-items: center; gap: .3em; font-size: .8em; color: #5b6676; text-align: center; transition: opacity .4s; }

/* kanban (dienstleistung) */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; height: 21em; }
.kcol { background: #e9eef3; border-radius: .7em; padding: .6em; display: grid; gap: .5em; align-content: start; }
.kcol > b { font-size: .85em; color: #44505f; }
.kcard { background: #fff; border-radius: .55em; padding: .55em .65em; border: 1px solid #dbe2ea; font-size: .85em; line-height: 1.35; transition: opacity .35s, transform .35s; }
.kcard small { color: #5b6676; display: block; }
.kcard.hl { border-color: #c8102e; box-shadow: 0 0 0 .2em rgba(200, 16, 46, .12); }
.kcard.leave { opacity: 0; transform: translateX(2em); }
html[dir="rtl"] .kcard.leave { transform: translateX(-2em); }

/* phone */
.phone { position: absolute; inset-inline-end: 0; bottom: 0; width: 14.5em; height: 30em; background: #0b1119; border-radius: 2.4em; padding: .55em; box-shadow: var(--shadow), 0 0 0 .12em #2e3a4b inset; transition: transform .2s; }
.phone.buzz { animation: buzz .5s; }
@keyframes buzz { 20%, 60% { transform: translateX(-.25em) rotate(-1deg); } 40%, 80% { transform: translateX(.25em) rotate(1deg); } }
.phone .scr { height: 100%; background: #fff; border-radius: 1.95em; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.phone .isl { position: absolute; top: .55em; left: 50%; width: 4.6em; height: 1.25em; background: #0b1119; border-radius: 1em; transform: translateX(-50%); z-index: 3; }
.pv { padding: 2.6em 1em 1em; display: flex; flex-direction: column; gap: .6em; flex: 1; min-height: 0; font-size: .92em; }
.pv .shop { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: .95em; }
.pv .shop i { width: 1.5em; height: 1.5em; border-radius: .45em; background: #0f1b2d; display: block; flex: none; }
.pv h6 { margin: 0; font-size: 1.25em; line-height: 1.2; font-family: var(--body); font-weight: 700; letter-spacing: -.01em; }
html[lang="ar"] .pv h6 { font-family: var(--arabic); }
.pv .muted { color: #5b6676; font-size: .85em; }
.track { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.track li { display: flex; align-items: center; gap: .55em; font-size: .9em; color: #7a8594; }
.track li::before { content: ""; width: .8em; height: .8em; border-radius: 50%; border: .15em solid #b6c0cc; flex: none; transition: background-color .3s, border-color .3s; }
.track li.done { color: #172233; }
.track li.done::before { background: #0b7a53; border-color: #0b7a53; }
.track li.cur { color: #172233; font-weight: 700; }
.track li.cur::before { border-color: #c8102e; background: #fff; box-shadow: 0 0 0 .2em rgba(200, 16, 46, .18); }
.pbox { border-radius: .8em; padding: .7em .8em; background: #f1f4f7; display: grid; gap: .3em; transition: background-color .4s; }
.pbox.ok { background: #dcf2e7; }
.pbox b.big { font-size: 1.15em; }
.pitem { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .45em 0; border-bottom: 1px solid #e8edf2; font-size: .9em; }
.pitem .al { font-family: var(--mono); font-size: .78em; color: #5b6676; }
.pitem .q { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; border-radius: .5em; background: #0f1b2d; color: #fff; font-weight: 700; font-size: .85em; transition: background-color .2s; }
.pitem .q.add { background: #c8102e; }
.pv .cta { margin-top: auto; display: block; text-align: center; padding: .75em; border-radius: .8em; background: #0f1b2d; color: #fff; font-weight: 700; transition: background-color .3s, transform .12s; }
.pv .cta.press { transform: scale(.96); }
.pv .cta.done { background: #0b7a53; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.slots span { text-align: center; padding: .45em 0; border-radius: .55em; border: 1px solid #cfd8e2; font-family: var(--mono); font-size: .85em; transition: background-color .25s, color .25s; }
.slots span.sel { background: #0f1b2d; color: #fff; border-color: #0f1b2d; }
.slots span.off { color: #b0b9c4; text-decoration: line-through; }
.sig { height: 4.2em; border: 1px dashed #b7c2ce; border-radius: .6em; position: relative; background: #fbfcfd; }
.sig svg { position: absolute; inset: .3em; width: calc(100% - .6em); height: calc(100% - .6em); }
.sig path { fill: none; stroke: #1f3d66; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.sig.signed path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease-in-out; }
.receipt-p { font-family: var(--mono); font-size: .8em; line-height: 1.55; background: #fff; border: 1px solid #e3e8ee; border-radius: .5em; padding: .7em; }
.receipt-p .r { display: flex; justify-content: space-between; gap: .6em; }
.receipt-p hr { border: 0; border-top: 1px dashed #b7c2ce; margin: .4em 0; }
.qr { display: block; width: 5.4em; height: 5.4em; background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-2 -2 29 29%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%27-2%27 y=%27-2%27 width=%2729%27 height=%2729%27 fill=%27%23fff%27/%3E%3Cpath d=%27M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM8 0h1v1h-1zM9 0h1v1h-1zM10 0h1v1h-1zM11 0h1v1h-1zM12 0h1v1h-1zM14 0h1v1h-1zM15 0h1v1h-1zM18 0h1v1h-1zM19 0h1v1h-1zM20 0h1v1h-1zM21 0h1v1h-1zM22 0h1v1h-1zM23 0h1v1h-1zM24 0h1v1h-1zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM13 1h1v1h-1zM15 1h1v1h-1zM16 1h1v1h-1zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM11 2h1v1h-1zM15 2h1v1h-1zM18 2h1v1h-1zM20 2h1v1h-1zM21 2h1v1h-1zM22 2h1v1h-1zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM11 3h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1zM18 3h1v1h-1zM20 3h1v1h-1zM21 3h1v1h-1zM22 3h1v1h-1zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM15 4h1v1h-1zM18 4h1v1h-1zM20 4h1v1h-1zM21 4h1v1h-1zM22 4h1v1h-1zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM12 5h1v1h-1zM13 5h1v1h-1zM14 5h1v1h-1zM15 5h1v1h-1zM16 5h1v1h-1zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM19 6h1v1h-1zM20 6h1v1h-1zM21 6h1v1h-1zM22 6h1v1h-1zM23 6h1v1h-1zM24 6h1v1h-1zM10 7h1v1h-1zM14 7h1v1h-1zM15 7h1v1h-1zM16 7h1v1h-1zM0 8h1v1h-1zM6 8h1v1h-1zM8 8h1v1h-1zM11 8h1v1h-1zM12 8h1v1h-1zM15 8h1v1h-1zM16 8h1v1h-1zM17 8h1v1h-1zM20 8h1v1h-1zM24 8h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM7 9h1v1h-1zM10 9h1v1h-1zM11 9h1v1h-1zM12 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM16 9h1v1h-1zM17 9h1v1h-1zM19 9h1v1h-1zM20 9h1v1h-1zM23 9h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM8 10h1v1h-1zM12 10h1v1h-1zM16 10h1v1h-1zM18 10h1v1h-1zM19 10h1v1h-1zM0 11h1v1h-1zM5 11h1v1h-1zM12 11h1v1h-1zM16 11h1v1h-1zM17 11h1v1h-1zM18 11h1v1h-1zM19 11h1v1h-1zM20 11h1v1h-1zM21 11h1v1h-1zM0 12h1v1h-1zM3 12h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM12 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM16 12h1v1h-1zM17 12h1v1h-1zM19 12h1v1h-1zM21 12h1v1h-1zM22 12h1v1h-1zM23 12h1v1h-1zM1 13h1v1h-1zM5 13h1v1h-1zM7 13h1v1h-1zM9 13h1v1h-1zM10 13h1v1h-1zM11 13h1v1h-1zM14 13h1v1h-1zM15 13h1v1h-1zM19 13h1v1h-1zM20 13h1v1h-1zM22 13h1v1h-1zM23 13h1v1h-1zM2 14h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM10 14h1v1h-1zM11 14h1v1h-1zM13 14h1v1h-1zM14 14h1v1h-1zM15 14h1v1h-1zM16 14h1v1h-1zM17 14h1v1h-1zM18 14h1v1h-1zM19 14h1v1h-1zM21 14h1v1h-1zM23 14h1v1h-1zM24 14h1v1h-1zM0 15h1v1h-1zM1 15h1v1h-1zM2 15h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1zM17 15h1v1h-1zM21 15h1v1h-1zM22 15h1v1h-1zM23 15h1v1h-1zM24 15h1v1h-1zM0 16h1v1h-1zM2 16h1v1h-1zM3 16h1v1h-1zM4 16h1v1h-1zM6 16h1v1h-1zM8 16h1v1h-1zM9 16h1v1h-1zM10 16h1v1h-1zM11 16h1v1h-1zM12 16h1v1h-1zM13 16h1v1h-1zM14 16h1v1h-1zM18 16h1v1h-1zM20 16h1v1h-1zM21 16h1v1h-1zM22 16h1v1h-1zM23 16h1v1h-1zM8 17h1v1h-1zM9 17h1v1h-1zM10 17h1v1h-1zM17 17h1v1h-1zM18 17h1v1h-1zM20 17h1v1h-1zM23 17h1v1h-1zM0 18h1v1h-1zM1 18h1v1h-1zM2 18h1v1h-1zM3 18h1v1h-1zM4 18h1v1h-1zM5 18h1v1h-1zM6 18h1v1h-1zM14 18h1v1h-1zM15 18h1v1h-1zM16 18h1v1h-1zM17 18h1v1h-1zM18 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM9 19h1v1h-1zM10 19h1v1h-1zM12 19h1v1h-1zM16 19h1v1h-1zM22 19h1v1h-1zM23 19h1v1h-1zM24 19h1v1h-1zM0 20h1v1h-1zM2 20h1v1h-1zM3 20h1v1h-1zM4 20h1v1h-1zM6 20h1v1h-1zM9 20h1v1h-1zM11 20h1v1h-1zM12 20h1v1h-1zM13 20h1v1h-1zM15 20h1v1h-1zM18 20h1v1h-1zM19 20h1v1h-1zM22 20h1v1h-1zM23 20h1v1h-1zM24 20h1v1h-1zM0 21h1v1h-1zM2 21h1v1h-1zM3 21h1v1h-1zM4 21h1v1h-1zM6 21h1v1h-1zM11 21h1v1h-1zM14 21h1v1h-1zM15 21h1v1h-1zM17 21h1v1h-1zM18 21h1v1h-1zM19 21h1v1h-1zM20 21h1v1h-1zM21 21h1v1h-1zM23 21h1v1h-1zM0 22h1v1h-1zM2 22h1v1h-1zM3 22h1v1h-1zM4 22h1v1h-1zM6 22h1v1h-1zM10 22h1v1h-1zM11 22h1v1h-1zM12 22h1v1h-1zM13 22h1v1h-1zM14 22h1v1h-1zM16 22h1v1h-1zM18 22h1v1h-1zM19 22h1v1h-1zM21 22h1v1h-1zM22 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM11 23h1v1h-1zM12 23h1v1h-1zM14 23h1v1h-1zM16 23h1v1h-1zM17 23h1v1h-1zM20 23h1v1h-1zM22 23h1v1h-1zM24 23h1v1h-1zM0 24h1v1h-1zM1 24h1v1h-1zM2 24h1v1h-1zM3 24h1v1h-1zM4 24h1v1h-1zM5 24h1v1h-1zM6 24h1v1h-1zM8 24h1v1h-1zM9 24h1v1h-1zM10 24h1v1h-1zM11 24h1v1h-1zM12 24h1v1h-1zM13 24h1v1h-1zM14 24h1v1h-1zM15 24h1v1h-1zM19 24h1v1h-1zM20 24h1v1h-1zM22 24h1v1h-1zM23 24h1v1h-1zM24 24h1v1h-1z%27 fill=%27%230f1b2d%27/%3E%3C/svg%3E") center / contain no-repeat; border-radius: .2em; }
.toast { position: absolute; inset-inline: .7em; top: 2.4em; z-index: 4; background: rgba(250, 251, 252, .97); border-radius: 1em; padding: .65em .8em; box-shadow: 0 .6em 1.6em rgba(10, 20, 35, .25); font-size: .82em; display: grid; grid-template-columns: 2em 1fr; gap: .1em .6em; align-items: center; transform: translateY(-140%); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s; }
.toast.show { transform: none; opacity: 1; }
.toast i { grid-row: span 2; width: 2em; height: 2em; border-radius: .55em; background: #0f1b2d; position: relative; }
.toast i::after { content: ""; position: absolute; inset: auto .45em .5em; height: .2em; background: #c8102e; }
.toast small { color: #5b6676; }
.cursor { position: absolute; z-index: 6; width: 1.6em; height: 1.6em; left: 50%; top: 60%; transition: left .7s cubic-bezier(.45, .05, .25, 1), top .7s cubic-bezier(.45, .05, .25, 1), opacity .3s; pointer-events: none; opacity: 0; }
.cursor.on { opacity: 1; }
.cursor::before { content: ""; position: absolute; inset: 0; background: #0f1b2d; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 88%, 37% 55%, 66% 55%); filter: drop-shadow(0 0 0 #fff); }
.cursor::after { content: ""; position: absolute; left: -.6em; top: -.6em; width: 1.2em; height: 1.2em; border-radius: 50%; background: rgba(200, 16, 46, .35); transform: scale(0); }
.cursor.tap::after { animation: tap .45s; }
@keyframes tap { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.demo-caption { margin: 0; color: var(--ink-2); font-size: 15px; min-height: 2.9em; }

/* ---------------------------------------------------------------- sections */
.sec { padding: 112px 0; }
.sec.alt { background: var(--surface); }
.sec.cine { padding: 128px 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(44px, 5.4vw, 80px); max-width: 13ch; }
html[lang="ar"] .sec-head h2 { font-size: clamp(30px, 3.6vw, 46px); }
.sec-head p { color: var(--ink-2); font-size: 18px; max-width: 34em; }
@media (max-width: 860px) { .sec, .sec.cine { padding: 72px 0; } .sec-head { grid-template-columns: 1fr; margin-bottom: 32px; } }

/* branch switcher */
.branch { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.btabs { display: grid; gap: 4px; position: sticky; top: 90px; }
.btab { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 4px 12px; text-align: start; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--ink-2); }
.btab svg { grid-row: span 2; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btab b { font-size: 16px; color: var(--ink); }
.btab small { font-size: 13.5px; color: var(--muted); }
.btab:hover { background: var(--surface); }
.btab { transition: background-color .2s, border-color .2s; }
.btab[aria-selected="true"] { background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow); }
.btab svg { transition: background-color .25s, color .25s, transform .25s; }
.btab[aria-selected="true"] svg { transform: rotate(-6deg) scale(1.08); }
.btab[aria-selected="true"] svg { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bpanel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: var(--shadow); }
.bpanel h3 { font-size: clamp(30px, 3.6vw, 44px); }
.bpanel .one { color: var(--ink-2); margin-top: 12px; font-size: 18px; max-width: 38em; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; padding: 5px 11px; border-radius: 8px; margin-bottom: 16px; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.live { background: var(--ok-soft); color: var(--ok); }
.badge.soon { background: var(--info-soft); color: var(--info); }
.flow { margin: 32px 0 8px; }
.flow h4, .bcols h4 { margin: 0 0 14px; font-size: 15px; font-weight: 650; color: var(--muted); }
.flow ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; counter-reset: st; }
.flow li { display: flex; align-items: center; font-size: 15px; font-weight: 600; }
.flow li > span { padding: 8px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.flow li:last-child > span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.flow li:not(:last-child)::after { content: ""; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 7px); }
.flow .note { margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.bcols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; padding-top: 28px; border-top: 1px dashed var(--line-2); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-inline-start: 26px; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .55em; width: 12px; height: 7px; border-inline-start: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.bpanel .go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.bpanel .go small { color: var(--muted); font-size: 14.5px; }
@media (max-width: 960px) {
  .branch { grid-template-columns: 1fr; }
  .btabs { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; }
  .btabs::-webkit-scrollbar { display: none; }
  .btab { grid-template-columns: 28px auto; padding: 9px 12px; }
  .btab svg { grid-row: auto; width: 28px; height: 28px; padding: 5px; border-radius: 7px; }
  .btab small { display: none; }
  .bpanel { padding: 24px 20px; border-radius: 16px; }
  .bcols { grid-template-columns: 1fr; }
}

/* customer pages */
.cust { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.cust figure { margin: 0; scroll-snap-align: start; }
.cust figcaption { margin-top: 16px; }
.cust figcaption b { display: block; font-size: 17px; }
.cust figcaption span { color: var(--muted); font-size: 15px; display: block; margin-top: 4px; }
.mini { font-size: 12.5px; position: relative; width: 250px; height: 470px; background: #0b1119; border-radius: 34px; padding: 8px; box-shadow: var(--shadow); color: #172233; }
.mini .scr { height: 100%; background: #fff; border-radius: 27px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.mini .isl { position: absolute; top: 8px; left: 50%; width: 62px; height: 18px; background: #0b1119; border-radius: 12px; transform: translateX(-50%); z-index: 2; }
.mini .pv { padding-top: 38px; font-size: 1em; }
.mini .url { font-family: var(--mono); font-size: 10.5px; color: #5b6676; background: #f1f4f7; border-radius: 8px; padding: 4px 8px; direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini .two span { text-align: center; padding: 8px; border-radius: 10px; font-weight: 700; }
.mini .yes { background: #0b7a53; color: #fff; }
.mini .no { background: #f1f4f7; color: #364256; }
.mini .big-no { font-family: var(--mono); font-size: 34px; font-weight: 600; text-align: center; letter-spacing: .02em; }
.mini .pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.mini .pbtns span { text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid #cfd8e2; font-weight: 650; }
.scroll-hint { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.scroll-hint button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.scroll-hint svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
html[dir="rtl"] .scroll-hint svg { transform: scaleX(-1); }

/* everywhere + offline */
.every { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; }
.devs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.devs div { padding: 26px 18px 22px; display: grid; gap: 10px; justify-items: start; align-content: start; border-inline-end: 1px solid var(--line); }
.devs div:last-child { border-inline-end: 0; }
.devs svg { width: 36px; height: 36px; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.devs b { font-size: 16px; }
.devs small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.offline { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px 32px; }
.offline h3 { font-size: 24px; }
.offline > p { color: var(--ink-2); margin-top: 8px; max-width: 46em; }
.net { position: relative; margin-top: 30px; display: grid; grid-template-columns: 1fr 1.4fr 1fr; direction: ltr; }
.net > div { position: relative; padding-top: 30px; }
.net > div::before { content: ""; position: absolute; top: 9px; inset-inline: 0; height: 4px; border-radius: 2px; background: var(--ok); }
.net > div.gap::before { background: repeating-linear-gradient(90deg, var(--wait) 0 8px, transparent 8px 14px); }
.net > div::after { content: ""; position: absolute; top: 3px; inset-inline-start: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ok); }
.net > div.gap::after { border-color: var(--wait); }
.net b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.net span { display: block; color: var(--ink-2); font-size: 15px; padding-inline-end: 14px; }
html[dir="rtl"] .net span, html[dir="rtl"] .net b { direction: rtl; text-align: right; }
html[dir="rtl"] .net { direction: rtl; }
.net .bons { display: flex; gap: 6px; margin-top: 10px; }
.net .bons i { width: 22px; height: 28px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 3px 3px 0 0; position: relative; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 6px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 6px 100%; }
.win { background: var(--ink); color: var(--bg); border-radius: 18px; padding: 30px; display: grid; gap: 16px; align-content: start; }
.win h3 { font-size: 24px; }
.win p { opacity: .85; }
.win ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.win li { display: flex; gap: 12px; align-items: baseline; }
.win li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--red); border-radius: 2px; transform: translateY(-1px) rotate(45deg); }
.win .small { font-size: 14.5px; opacity: .78; border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); padding-top: 14px; }
@media (max-width: 960px) { .every { grid-template-columns: 1fr; } .devs { grid-template-columns: 1fr 1fr; } .devs div:nth-child(2) { border-inline-end: 0; } .devs div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 640px) {
  .offline { padding: 24px 20px; }
  .net { grid-template-columns: 1fr; gap: 6px; }
  .net > div { padding-top: 0; padding-inline-start: 30px; padding-bottom: 14px; }
  .net > div::before { top: 0; bottom: 0; inset-inline-start: 6px; width: 4px; height: auto; inset-inline-end: auto; }
  .net > div.gap::before { background: repeating-linear-gradient(180deg, var(--wait) 0 8px, transparent 8px 14px); }
  .net > div::after { top: 2px; }
}

/* law */
.law { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.cine .law article.key { background: rgba(228, 32, 63, .14); }
.cine .paper { opacity: .9; }
.law article { padding: 26px 26px 30px 0; border-bottom: 1px solid var(--line); }
.law article:not(:nth-child(3n)) { border-inline-end: 1px solid var(--line); }
.law article:not(:nth-child(3n+1)) { padding-inline-start: 26px; }
html[dir="rtl"] .law article { padding-right: 0; padding-left: 26px; }
html[dir="rtl"] .law article:not(:nth-child(3n+1)) { padding-right: 26px; }
.law .when { font-family: var(--mono); font-size: 13.5px; color: var(--muted); }
.law h3 { font-size: 21px; margin: 8px 0 10px; line-height: 1.2; }
.law p { color: var(--ink-2); font-size: 16px; }
.law article.key { background: var(--red-soft); }
.law article.key .when { color: var(--red-ink); font-weight: 600; }
.law-foot { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 28px; color: var(--muted); font-size: 15px; }
@media (max-width: 960px) {
  .law { grid-template-columns: 1fr 1fr; }
  .law article, html[dir="rtl"] .law article { padding: 22px 20px 24px !important; border-inline-end: 0 !important; }
  .law article:nth-child(odd) { border-inline-end: 1px solid var(--line) !important; }
}
@media (max-width: 600px) { .law { grid-template-columns: 1fr; } .law article:nth-child(odd) { border-inline-end: 0 !important; } .law article, html[dir="rtl"] .law article { padding-inline: 0 !important; } .law article.key { padding-inline: 16px !important; } }

/* price */
.price { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: start; }
.receipt { background: var(--paper); color: var(--paper-ink); font-family: var(--mono); font-size: 14.5px; line-height: 1.6; padding: 30px 28px 40px; position: relative;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.receipt-wrap { filter: drop-shadow(0 20px 30px rgba(15, 27, 45, .18)); }
@media (prefers-color-scheme: dark) { .receipt-wrap { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); } }
.receipt .head { text-align: center; }
.receipt .head b { font-size: 17px; letter-spacing: .14em; }
.receipt .r { display: flex; justify-content: space-between; gap: 14px; }
.receipt .r > span:first-child { min-width: 0; }
.receipt .r > span:last-child { white-space: nowrap; }
.receipt hr { border: 0; border-top: 1.5px dashed currentColor; opacity: .45; margin: 12px 0; }
.receipt .total { font-size: 22px; font-weight: 600; }
.receipt .total span:last-child { color: #a50d26; }
.receipt .free { margin-top: 6px; padding: 8px 10px; border: 1.5px solid currentColor; text-align: center; font-weight: 600; }
.receipt .muted { opacity: .72; }
.receipt .slot { opacity: .78; }
html[lang="ar"] .receipt { font-family: var(--mono), var(--arabic); }
html[lang="ar"] .receipt [data-lang="ar"] { font-family: var(--arabic); }
.plan h3 { font-size: clamp(28px, 3.4vw, 40px); }
.plan .big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.plan .big strong { font-family: var(--display); font-size: clamp(64px, 9vw, 108px); line-height: .9; letter-spacing: -.04em; }
.plan .big span { font-size: 18px; color: var(--ink-2); }
.plan .sub { color: var(--muted); }
.plan .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 40px; }
.extra h4 { margin: 0 0 6px; font-size: 18px; font-family: var(--display); }
html[lang="ar"] .extra h4 { font-family: var(--arabic); }
.extra > p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.extra table { width: 100%; border-collapse: collapse; font-size: 16px; }
.extra th, .extra td { text-align: start; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.extra thead th { font-size: 14px; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.extra td:first-child { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent); text-decoration-thickness: 1.5px; padding-inline-end: 16px; }
.extra td:last-child { font-weight: 650; white-space: nowrap; }
@media (max-width: 960px) { .price { grid-template-columns: 1fr; gap: 40px; } .receipt-wrap { max-width: 460px; } }
@media (max-width: 420px) { .receipt { padding: 24px 18px 36px; font-size: 13.5px; } .receipt .total { font-size: 19px; } }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
.faq h2 { font-size: clamp(44px, 5.4vw, 80px); }
.faq .aside p { color: var(--ink-2); margin-top: 16px; }
.faq .aside a { font-weight: 650; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; font-weight: 650; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 7px; border-inline-end: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.faq details > div { padding: 0 0 22px; color: var(--ink-2); max-width: 42em; }
.faq details > div p + p { margin-top: 10px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 24px; } }

/* final call */
.final { padding: 120px 0; background: var(--cine); color: var(--cine-ink); position: relative; overflow: hidden; }
.final .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: end; }
.final h2 { font-size: clamp(48px, 6.4vw, 96px); max-width: 14ch; }
.final p { margin-top: 18px; font-size: 18px; opacity: .85; max-width: 32em; }
.final .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.final .btn-line { color: var(--cine-ink); border-color: var(--cine-line-2); }
.final .btn-line:hover { border-color: var(--cine-ink); }
.final::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 6px; background: linear-gradient(var(--red) 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(var(--red) 0 0) 0 4px / 100% 2px no-repeat; }
@media (max-width: 860px) { .final { padding: 72px 0; } .final .wrap { grid-template-columns: 1fr; } }

/* footer */
.foot { padding: 56px 0 40px; font-size: 15px; color: var(--ink-2); }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { margin: 0 0 12px; font-size: 14px; color: var(--muted); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot .about p { margin-top: 12px; max-width: 30em; color: var(--muted); }
.foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .about { grid-column: 1 / -1; } }

/* sticky call on phones */
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .25s; }
.dock.show { transform: none; }
.dock .t { font-size: 14px; line-height: 1.3; color: var(--ink-2); flex: 1; min-width: 0; }
.dock .t b { color: var(--ink); display: block; font-size: 15px; }
.dock .btn { min-height: 46px; padding: 0 16px; }
@media (max-width: 760px) { .dock { display: flex; } body.has-dock { padding-bottom: 76px; } }

/* simple centred page (404) */
.lost { min-height: 62vh; display: grid; place-items: center; padding: 72px 0; text-align: center; }
.lost .receipt-wrap { margin: 0 auto 30px; width: min(320px, 100%); }
.lost .receipt { text-align: start; }
.lost h1 { font-size: clamp(40px, 6vw, 72px); }
.lost p { color: var(--ink-2); margin: 14px auto 28px; max-width: 30em; }
.lost .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }


/* ---------------------------------------------------------------- hero receipt printer */
.printer { position: relative; width: min(400px, 100%); margin-inline: auto; }
.printer .receipt-wrap { filter: none; }
.printer .slot { position: relative; z-index: 2; height: 34px; border-radius: 12px; background: var(--ink); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.printer .slot::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 4px; border-radius: 2px; background: #000; opacity: .55; }
.printer .slot i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
.printer .slot span { font-family: var(--mono); font-size: 11px; color: color-mix(in srgb, var(--bg) 70%, transparent); letter-spacing: .08em; }
.printer .feed { margin: -10px 18px 0; overflow: hidden; padding-bottom: 26px; }
.printer .receipt { padding-top: 26px; font-size: 14px; }
.printer.printing .receipt { animation: feed 2.6s steps(26, end) .3s both; }
.receipt .total span:last-child { color: var(--red-ink); }
.cine .receipt .total span:last-child { color: #a50d26; }
@keyframes feed { from { transform: translateY(-100%); } to { transform: none; } }
.receipt .sec-l { opacity: .7; font-size: 12.5px; margin: 10px 0 2px; }
.receipt .note { font-size: 12px; line-height: 1.45; opacity: .78; margin-top: 8px; }
html[lang="ar"] .receipt .note, html[lang="ar"] .receipt .sec-l { font-family: var(--arabic); }

/* law ribbon under the hero */
.ribbon { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 32px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.ribbon:hover { border-color: var(--ink); }
.ribbon .d { font-family: var(--mono); font-weight: 600; font-size: 14px; background: var(--red); color: #fff; padding: 4px 9px; border-radius: 7px; }
@media (prefers-color-scheme: dark) { .ribbon .d { color: #1a0a0d; } }
.ribbon b { font-weight: 650; }
.ribbon span.more { margin-inline-start: auto; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- differences */
.diff { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.spec { border-top: 2px solid var(--ink); }
.spec > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.spec dt { font-family: var(--display); font-weight: 750; font-size: 32px; letter-spacing: .01em; line-height: 1; }
html[lang="ar"] .spec dt { font-family: var(--arabic); font-size: 23px; letter-spacing: 0; }
.spec dd { margin: 0; color: var(--ink-2); }
.spec dd small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.ledger { background: var(--ink); color: var(--bg); border-radius: 20px; padding: 30px; position: sticky; top: 96px; }
.ledger h3 { font-size: 24px; }
.ledger > p { opacity: .8; margin-top: 8px; font-size: 15.5px; }
.ledger table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 16px; }
.ledger th, .ledger td { text-align: start; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); vertical-align: top; }
.ledger thead th { font-size: 13.5px; font-weight: 600; opacity: .75; }
.ledger td:first-child { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; opacity: .85; padding-inline-end: 14px; }
.ledger td:last-child { font-weight: 650; white-space: nowrap; }
.ledger .honest { margin-top: 18px; font-size: 14.5px; opacity: .85; padding: 12px 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--bg) 35%, transparent); }
@media (max-width: 960px) { .diff { grid-template-columns: 1fr; } .ledger { position: static; } }
@media (max-width: 640px) { .spec > div { grid-template-columns: 1fr; } .spec dt { font-size: 23px; } .ledger { padding: 24px 20px; } }

/* ---------------------------------------------------------------- new law 2026 */
.lawhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-bottom: 56px; }
.lawhero .since { color: var(--muted); font-size: 16px; }
.lawhero .date { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(72px, 9.6vw, 150px); letter-spacing: .005em; line-height: .9; margin: 6px 0 18px; direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .lawhero .date { text-align: right; }
.lawhero .date i { font-style: normal; color: var(--red); }
.lawhero h2 { font-size: clamp(34px, 4vw, 54px); }
.lawhero p { color: var(--ink-2); margin-top: 14px; font-size: 18px; max-width: 34em; }
.swap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; justify-items: center; }
.swap figure { margin: 0; display: grid; gap: 12px; justify-items: center; text-align: center; }
.swap figcaption { font-size: 14.5px; color: var(--muted); max-width: 14em; }
.swap figcaption b { display: block; color: var(--ink); font-size: 16px; }
.paper { width: 150px; background: var(--paper); color: var(--paper-ink); font-family: var(--mono); font-size: 10.5px; line-height: 1.6; padding: 14px 12px 22px; opacity: .6; transform: rotate(-4deg);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.paper .r { display: flex; justify-content: space-between; }
.paper hr { border: 0; border-top: 1px dashed currentColor; opacity: .5; margin: 6px 0; }
.swap .arrow svg { width: 40px; height: 40px; stroke: var(--red); fill: none; stroke-width: 2; }
html[dir="rtl"] .swap .arrow svg { transform: scaleX(-1); }
.mini.sm { width: 190px; height: 360px; border-radius: 28px; font-size: 11px; }
.mini.sm .scr { border-radius: 22px; }
.mini.sm .pv { padding-top: 32px; }
.law.six article .when { display: block; }
@media (max-width: 960px) { .lawhero { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) { .swap { grid-template-columns: 1fr; } .swap .arrow svg { transform: rotate(90deg); } html[dir="rtl"] .swap .arrow svg { transform: rotate(90deg); } }

/* ---------------------------------------------------------------- switch presentation */
.switch { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
.switch .btabs { position: sticky; top: 92px; }
.btab .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; display: none; }
.btab[aria-selected="true"] .bar { display: block; }
.btab .bar i { display: block; height: 100%; width: 0; background: var(--red); }
.demo-tools { display: flex; align-items: flex-start; gap: 16px; margin-top: 16px; min-height: 44px; }
.demo-tools .demo-caption { margin: 0; flex: 1; }
.demo-tools .pause { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; padding: 7px 12px; font-size: 14.5px; cursor: pointer; min-height: 40px; color: var(--ink-2); }
.demo-tools .pause svg { width: 14px; height: 14px; fill: currentColor; }
.app-bar .type { padding: .15em .55em; border-radius: .45em; background: #0f1b2d; color: #fff; font-size: .82em; font-weight: 650; transition: background-color .3s; }
.app-bar .type.flash { background: #c8102e; }
.panels { min-width: 0; }
@media (max-width: 960px) {
  .switch { grid-template-columns: 1fr; gap: 20px; }
  .switch .btabs { grid-auto-flow: column; }
}

/* ---------------------------------------------------------------- languages */
.langs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5.6vw, 76px); line-height: 1.2; letter-spacing: .01em; }
.langs span { display: inline-flex; align-items: baseline; }
.langs span::after { content: "/"; color: var(--line-2); font-weight: 300; margin: 0 .32em; }
.langs span:last-child::after { content: none; }
.langs [lang="ar"], .langs [lang="fa"] { font-family: var(--arabic); letter-spacing: 0; }
.langs [lang="uk"], .langs [lang="tr"], .langs [lang="ro"], .langs [lang="pl"], .langs [lang="hu"], .langs [lang="bs"] { font-family: var(--body); letter-spacing: -.01em; }
.langs .alt { color: var(--muted); }
.langs-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.langs-note b { display: block; font-size: 17px; margin-bottom: 6px; }
.langs-note p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .langs-note { grid-template-columns: 1fr; gap: 18px; } }

/* ---------------------------------------------------------------- plans */
.bill { display: inline-flex; padding: 4px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); margin-bottom: 28px; }
.bill button { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: 40px; }
.bill button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.plans { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.plan-c { padding: 36px 34px 54px; display: flex; flex-direction: column; gap: 18px; background: var(--paper); color: var(--paper-ink); position: relative;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.plan-c::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--ink); }
.plan-c.main::before { background: var(--red); }
.plans-wrap { filter: drop-shadow(0 24px 30px rgba(10, 35, 40, .16)); }
@media (prefers-color-scheme: dark) { .plans-wrap { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5)); } }
.plan-c .tag { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.plan-c .fine, .plan-c .pnote { font-family: var(--mono); font-size: 13px; }
html[lang="ar"] .plan-c .fine, html[lang="ar"] .plan-c .pnote, html[lang="ar"] .plan-c .tag { font-family: var(--arabic); }
.plan-c .btn-line { color: var(--paper-ink); border-color: var(--paper-ink); }
.plan-c .btn-line:hover { background: rgba(10, 35, 40, .06); }
.plan-c li::before { border-color: var(--ok); }
.plan-c h3 { font-size: 30px; }
.plan-c .amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-c .amount strong { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 8vw, 104px); line-height: .9; letter-spacing: .005em; display: inline-block; }
.plan-c .amount strong.roll { animation: roll .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes roll { from { transform: translateY(.35em); opacity: 0; } to { transform: none; opacity: 1; } }
.plan-c .amount strong.tbd { font-size: clamp(32px, 4vw, 44px); letter-spacing: -.02em; }
html[lang="ar"] .plan-c .amount strong.tbd { font-family: var(--arabic); }
.plan-c .amount span { font-size: 17px; opacity: .85; }
.plan-c .pnote { font-size: 15px; opacity: .8; min-height: 1.6em; }
.plan-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.plan-c li { position: relative; padding-inline-start: 26px; }
.plan-c li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .55em; width: 12px; height: 7px; border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .9; }
.plan-c .fine { font-size: 14.5px; opacity: .8; border-top: 1px dashed color-mix(in currentColor 30%, transparent); padding-top: 14px; }
.plan-c .act { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.plan-c .act small { font-size: 14px; opacity: .75; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .plan-c { padding: 28px 22px 44px; } }

/* ---------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.contact h2 { font-size: clamp(40px, 5vw, 72px); }
.contact .intro { color: var(--ink-2); margin-top: 14px; max-width: 30em; }
.mails { display: grid; gap: 14px; }
.mail { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.mail:hover { border-color: var(--ink); }
.mail svg { grid-row: span 2; width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--bg-2); stroke: var(--ink); fill: none; stroke-width: 1.7; stroke-linejoin: round; }
.mail b { font-size: 17px; }
.mail .addr { font-family: var(--mono); font-size: 15.5px; color: var(--ink-2); overflow-wrap: anywhere; direction: ltr; text-align: start; }
html[dir="rtl"] .mail .addr { text-align: right; }
.mail small { grid-column: 2; color: var(--muted); font-size: 14.5px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: 24px; } }


/* founder offer */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px 28px; align-items: center; margin-top: 24px; padding: 24px 28px; border-radius: 18px; border: 2px dashed var(--red); background: var(--red-soft); }
.founder b { font-size: 19px; }
.founder p { color: var(--ink-2); margin-top: 4px; }
.founder .big { font-family: var(--display); font-weight: 750; font-size: 30px; letter-spacing: -.02em; color: var(--red-ink); white-space: nowrap; }
html[lang="ar"] .founder .big { font-family: var(--arabic); }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; padding: 22px 20px; } }

/* QR transfer */
.qrpay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.qrpay h2 { font-size: clamp(44px, 5.4vw, 80px); max-width: 12ch; }
.qrpay .intro { color: var(--ink-2); font-size: 18px; margin-top: 18px; max-width: 34em; }
.qrfacts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.qrfacts li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.qrfacts li b { font-size: 16.5px; }
.qrfacts li span { color: var(--ink-2); font-size: 16px; }
.display { justify-self: center; width: min(440px, 100%); }
.display-scr { background: #fff; color: #172233; border-radius: 18px; border: 10px solid #1b2433; box-shadow: var(--shadow); padding: 18px 20px; display: grid; gap: 14px; }
.display-foot { width: 34%; height: 46px; margin: 0 auto; background: linear-gradient(#a8b3bf, #8b97a5); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
@media (prefers-color-scheme: dark) { .display-scr { border-color: #05090f; } .display-foot { background: linear-gradient(#3c4656, #2a3240); } }
.ds-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15px; }
.ds-head .num { font-family: var(--mono); font-weight: 400; color: #5b6676; font-size: 13px; }
.ds-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.ds-body .qr { width: 150px; height: 150px; }
.ds-l { color: #5b6676; font-size: 14px; }
.ds-body strong { display: block; font-family: var(--mono); font-size: 32px; font-weight: 600; margin: 2px 0 10px; }
.ds-body dl { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.ds-body dl div { display: grid; gap: 0; }
.ds-body dt { color: #5b6676; }
.ds-body dd { margin: 0; font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.ds-foot { text-align: center; font-size: 14px; color: #5b6676; padding-top: 10px; border-top: 1px dashed #c9d2dc; }
@media (max-width: 960px) { .qrpay { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 520px) { .qrfacts li { grid-template-columns: 1fr; } .ds-body { grid-template-columns: 1fr; justify-items: center; text-align: center; } .ds-body dl { justify-items: center; } }

/* simple text page (contact) */
.page { padding: 64px 0 88px; }
.page h1 { font-size: clamp(44px, 6vw, 84px); max-width: 14ch; }
.page .lead { color: var(--ink-2); font-size: 19px; margin-top: 16px; max-width: 36em; }
.page .mails { margin-top: 40px; max-width: 640px; }
.page .post { margin-top: 40px; color: var(--ink-2); max-width: 36em; }
.page .post b { color: var(--ink); }


/* help assistant */
.assist-btn { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 46px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); font-weight: 650; font-size: 15px; cursor: pointer; box-shadow: var(--shadow); }
.assist-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.assist { position: fixed; inset-inline-end: 18px; bottom: 76px; z-index: 40; width: min(370px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(15, 27, 45, .45); overflow: hidden; }
.assist header { position: relative; padding: 14px 48px 12px 16px; background: var(--ink); color: var(--bg); display: grid; }
html[dir="rtl"] .assist header { padding: 14px 16px 12px 48px; }
.assist header small { opacity: .75; font-size: 13px; }
.assist .x { position: absolute; inset-inline-end: 8px; top: 8px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
.assist .log { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 8px; align-content: start; font-size: 15px; }
.assist .log p { max-width: 88%; padding: 9px 12px; border-radius: 14px; line-height: 1.45; }
.assist .log .bot { background: var(--bg); justify-self: start; }
.assist .log .me { background: var(--ink); color: var(--bg); justify-self: end; }
.assist .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.assist .chips button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 5px 11px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.assist form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.assist input { flex: 1; min-width: 0; min-height: 42px; border-radius: 10px; border: 1.5px solid var(--line-2); padding: 0 12px; font: inherit; font-size: 15px; background: var(--surface); color: var(--ink); }
.assist form button { border: 0; border-radius: 10px; padding: 0 14px; background: var(--red); color: #fff; font-weight: 650; cursor: pointer; }
@media (max-width: 760px) { body.has-dock .assist-btn { bottom: 84px; } body.has-dock .assist { bottom: 140px; } .assist-btn span { display: none; } .assist-btn { padding: 0 13px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Print: a plain, light, single-column page without the animated and interactive parts. */
@media print {
  :root { --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --ink-2: #222; --muted: #444; --line: #bbb; --line-2: #999; --shadow: none; color-scheme: light; }
  html { scroll-padding-top: 0; }
  body { font-size: 12pt; background: #fff; color: #000; }
  .top, .skip, .lang, .dock, .assist, .assist-btn, .pause, .demo-tools, .scroll-hint, .ribbon .more, .btn, .top .end, .foot nav, .final { display: none !important; }
  .top .brand { display: inline-flex !important; color: #000; }
  .top { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #000; }
  .top .wrap { justify-content: flex-start; }
  .sec, .hero, .final { padding: 18pt 0; break-inside: avoid-page; }
  .hero-grid, .diff, .lawhero, .switch, .every, .plans, .faq, .qrpay, .contact, .cust, .langs-note, .bcols { display: block !important; }
  .ledger, .btabs { position: static !important; }
  .ledger { background: none; color: #000; border: 1px solid #000; }
  .stage, .btabs .bar, .printer .slot, .swap .arrow, .display, .bons, .chapters { display: none !important; }
  .film-track { height: auto !important; }
  .film-view { position: static !important; height: auto !important; overflow: visible !important; }
  .film-grid { display: block !important; }
  .film.scrub .printer { position: static; transform: none; opacity: 1; width: auto; }
  .film.scrub .printer .receipt { transform: none !important; }
  .cine, .top, .hero { --bg: #fff; --surface: #fff; --ink: #000; --ink-2: #222; --muted: #444; --line: #bbb; --line-2: #999; background: #fff; color: #000; }
  .printer .feed { overflow: visible; margin: 0; }
  .printer.printing .receipt { animation: none !important; }
  html[lang] .bpanel[hidden] { display: block !important; break-inside: avoid; margin-top: 12pt; border-top: 1px solid #bbb; padding-top: 12pt; }
  .cust { overflow: visible; }
  .cust figure { break-inside: avoid; }
  .plan-c, .law article, details { break-inside: avoid; }
  details::details-content { content-visibility: visible; display: block; }
  a { text-decoration: none; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: ""; }
}