/* Tahweel's website. Colours and type come from brand/README.md; every side is logical, so Arabic mirrors on its own. */
@font-face { font-family: "Readex Pro"; src: url("readex-pro.woff") format("woff"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #F6F7FC; --surface: #FFFFFF; --surface-2: #EDF0FB; --ink: #14151B; --ink-2: #4A4E63; --ink-3: #6A6F86; --line: rgba(20, 21, 27, .1);
  --accent: #2A3FE0; --accent-ink: #FFFFFF; --accent-soft: #E3E9FF; --band-1: #E9EDFF; --band-2: #F0F3FF;
  --num-a: #4C6BFF; --num-b: #1B2BC4;
  --lapis-a: #1B2BC4; --lapis-b: #3A55F0;
  --shadow: 0 1px 2px rgba(20, 25, 70, .06), 0 14px 34px -14px rgba(27, 43, 196, .22);
  --shadow-win: 0 2px 6px rgba(20, 25, 70, .1), 0 22px 46px -18px rgba(20, 25, 70, .35);
  --panel-bg: rgba(248, 248, 251, .86); --panel-ink: #17181F; --panel-line: rgba(0, 0, 0, .1); --panel-dim: rgba(23, 24, 31, .42);
  --wall-a: #E8EDFF; --wall-b: #CBD6FF; --wall-c: #5C79FF; --wall-d: #1B2BC4; --wall-e: #DCE3FF; --wall-f: #9DB0FF; --wall-g: #6F8BFF;
  --bar-bg: rgba(255, 255, 255, .55); --bar-ink: #14151B; --taskbar-bg: rgba(240, 243, 250, .78);
  --radius: 18px; --bad: #C2293A;
  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", "Geeza Pro", Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C0E1A; --surface: #151829; --surface-2: #1C2036; --ink: #F2F3FA; --ink-2: #B7BBD0; --ink-3: #9398B2; --line: rgba(255, 255, 255, .11);
    --accent: #9DB0FF; --accent-ink: #0C0E1A; --accent-soft: #232A52; --band-1: #161A33; --band-2: #12152A;
    --num-a: #C9D4FF; --num-b: #6F8BFF;
    --lapis-a: #1B2599; --lapis-b: #2A3FC8;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -14px rgba(0, 0, 0, .6);
    --shadow-win: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 46px -18px rgba(0, 0, 0, .75);
    --panel-bg: rgba(40, 42, 56, .86); --panel-ink: #F2F3FA; --panel-line: rgba(255, 255, 255, .13); --panel-dim: rgba(242, 243, 250, .42);
    --wall-a: #1B2350; --wall-b: #121838; --wall-c: #3A55F0; --wall-d: #141E8C; --wall-e: #4C63C8; --wall-f: #3347A8; --wall-g: #27388F;
    --bar-bg: rgba(18, 20, 36, .6); --bar-ink: #F2F3FA; --taskbar-bg: rgba(24, 26, 44, .78); --bad: #FF8E9A;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(36px, 6.4vw, 68px); line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: clamp(27px, 4vw, 42px); line-height: 1.15; letter-spacing: -.018em; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 500; }
:lang(ar) h1 { line-height: 1.25; }
:lang(ar) h2 { line-height: 1.3; }
:lang(ar) h1, :lang(ar) h2 { letter-spacing: 0; }
:lang(ar) body, body:lang(ar) { line-height: 1.75; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--surface); padding: 8px 14px; border-radius: 8px; z-index: 30; }
.skip:focus { top: 12px; }
.ico { width: 18px; height: 18px; flex: none; }
.arrow { width: 16px; height: 16px; flex: none; }
[dir=rtl] .arrow { transform: scaleX(-1); }
.fine { color: var(--ink-3); font-size: 13.5px; }
.lead { color: var(--ink-2); font-size: clamp(17px, 2.1vw, 20px); line-height: 1.55; }
.lead strong { color: var(--ink); font-weight: 500; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-block-end: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; }
.logo { display: block; height: 36px; width: auto; }
.top-nav { display: flex; gap: 22px; margin-inline-start: 12px; font-size: 14.5px; }
.top-nav a { color: var(--ink-2); text-decoration: none; }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--ink); }
.top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.langs { position: relative; font-size: 14px; }
.langs summary { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2); list-style: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover { background: var(--surface-2); }
.langs-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 150px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: grid; }
.langs-list a { padding: 7px 10px; border-radius: 7px; text-decoration: none; }
.langs-list a:hover { background: var(--surface-2); }
.langs-list a[aria-current] { color: var(--accent); font-weight: 500; }

/* Buttons */
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; line-height: 1.3; text-align: center; }
.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.second { background: var(--surface); color: var(--ink); border-color: var(--line); }
a.btn:hover { filter: brightness(1.08); }
.btn.soon { cursor: default; }
.btn:disabled { opacity: .6; }

/* The waitlist */
.join { position: relative; width: 100%; max-width: 540px; margin-inline: auto; }
.join-label, .join-trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.join-row:focus-within { border-color: var(--accent); }
.join input[type=email] { flex: 999 1 200px; min-width: 0; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.join input[type=email]:focus { outline: none; }
.join input[type=email]::placeholder { color: var(--ink-3); }
:lang(ar) .join input[type=email]:placeholder-shown { direction: rtl; }
.join .btn { flex: 1 0 auto; font-family: inherit; cursor: pointer; }
.join .join-why { margin-block: 12px 0; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.join .join-status { margin-block: 10px 0; color: var(--bad); font-size: 14.5px; font-weight: 500; text-align: center; }
.join.joined .join-row, .join.joined .join-why { display: none; }
.join.joined .join-status { margin-block: 0; padding: 14px 16px; color: var(--ink); background: var(--accent-soft); border-radius: 14px; }
.join-progress { margin-block-start: 22px; padding-inline: 24px; }
.join-track { position: relative; block-size: 3px; margin-block-end: 34px; background: var(--line); border-radius: 3px; }
.join-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2%; background: var(--accent); border-radius: 3px; transition: inline-size .6s ease; }
.join-track .arrow { position: absolute; inset-inline-end: -13px; inset-block-start: -7px; color: var(--ink-3); }
.join-mark { position: absolute; inset-block-start: 10px; transform: translateX(-50%); color: var(--ink-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
[dir=rtl] .join-mark { transform: translateX(50%); }
.join-mark::before { content: ""; position: absolute; inset-block-start: -13px; inset-inline-start: calc(50% - 4px); inline-size: 8px; block-size: 8px; background: var(--bg); border: 2px solid var(--ink-3); border-radius: 50%; }
.join-mark:last-of-type::before { display: none; }
.join-mark.on { color: var(--accent); }
.join-mark.on::before { background: var(--accent); border-color: var(--accent); }
.join .join-count { margin-block: 0; color: var(--ink); font-size: 15.5px; font-weight: 500; text-align: center; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14.5px; font-weight: 500; text-decoration: none; }
a.link:hover { text-decoration: underline; }

/* Hero: the bands of the icon, tilted, behind everything */
.hero { padding-block: clamp(44px, 8vw, 84px) clamp(34px, 5vw, 60px); text-align: center; background:
  linear-gradient(176deg, var(--band-1) 0 58%, transparent 58.2%) no-repeat,
  linear-gradient(178.6deg, var(--band-2) 0 68%, transparent 68.2%) no-repeat; }
[dir=rtl] .hero { background:
  linear-gradient(184deg, var(--band-1) 0 58%, transparent 58.2%) no-repeat,
  linear-gradient(181.4deg, var(--band-2) 0 68%, transparent 68.2%) no-repeat; }
.eyebrow { display: inline-block; padding: 4px 13px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 500; margin-block-end: 18px; }
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero .lead { max-width: 60ch; margin: 20px auto 26px; }

/* The demo */
.demo { margin-block-start: clamp(30px, 5vw, 52px); text-align: start; }
.stage { position: relative; height: clamp(540px, 58vw, 640px); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-win); isolation: isolate; user-select: none; -webkit-user-select: none; }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
[dir=rtl] .wall { transform: scaleX(-1); }
.os-bar { position: absolute; inset-inline: 0; display: none; align-items: center; font-size: 12px; color: var(--bar-ink); }
.os-mac { top: 0; height: 26px; gap: 8px; padding-inline: 12px; background: var(--bar-bg); backdrop-filter: blur(14px); font-weight: 500; }
.os-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--bar-ink); }
.os-windows { bottom: 0; height: 42px; justify-content: center; gap: 8px; background: var(--taskbar-bg); backdrop-filter: blur(14px); }
.os-start { width: 20px; height: 20px; border-radius: 2px; background: conic-gradient(#2A6CF0 0 25%, #4C8CF5 0 50%, #2A6CF0 0 75%, #4C8CF5 0); }
.os-pill { width: 20px; height: 20px; border-radius: 5px; background: var(--bar-ink); opacity: .18; }
.demo[data-os=mac] .os-mac, .demo[data-os=windows] .os-windows { display: flex; }
.files { position: absolute; top: 46px; inset-inline-start: 26px; display: grid; grid-template-columns: repeat(2, 116px); gap: 10px 6px; }
.file { all: unset; box-sizing: border-box; width: 116px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: default; border-radius: 10px; font-size: 12.5px; line-height: 1.3; text-align: center; }
button.file:hover .ficon { filter: brightness(1.04); transform: translateY(-1px); }
button.file:focus-visible { outline: 2px solid #fff; outline-offset: -1px; box-shadow: 0 0 0 4px rgba(27, 43, 196, .6); }
.fname { padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, .82); color: #14151B; max-width: 112px; overflow-wrap: anywhere; }
.file.selected .fname { background: #2A3FE0; color: #fff; }
.file.selected .ficon { filter: brightness(.9); }
.ficon { position: relative; display: block; width: 52px; height: 64px; border-radius: 6px; background: linear-gradient(180deg, #FFFFFF, #EDEFF7); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 12px -6px rgba(10, 20, 80, .45); transition: transform .15s; }
.ficon::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 15px; height: 15px; background: linear-gradient(225deg, transparent 50%, #C7CCE0 50%); border-radius: 0 0 0 3px; }
[dir=rtl] .ficon::after { background: linear-gradient(135deg, transparent 50%, #C7CCE0 50%); border-radius: 0 0 3px 0; }
.ficon i { position: absolute; bottom: 8px; inset-inline: 5px; padding: 1px 0; border-radius: 3px; background: var(--k, #3A55F0); color: #fff; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .02em; }
.k-pdf { --k: #D93A3A; } .k-photos { --k: #18985A; } .k-video { --k: #7A3FE0; } .k-sound { --k: #E2641E; } .k-documents { --k: #2A6CF0; } .k-sheets { --k: #0E8A6A; } .k-new { --k: #2A3FE0; }
.k-folder { background: linear-gradient(180deg, #A9C2FF, #6F8BFF); height: 46px; margin-block-start: 18px; }
.k-folder::after { display: none; }
.made { animation: pop .34s cubic-bezier(.2, 1.3, .4, 1); }
.file.busy .ficon { animation: pulse .7s ease-in-out infinite; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } }
@keyframes pulse { 50% { filter: brightness(.82); transform: scale(.96); } }

.menus { position: absolute; inset: 0; pointer-events: none; }
.panel { position: absolute; pointer-events: auto; min-width: 186px; max-width: min(280px, calc(100% - 16px)); overflow-y: auto; padding: 5px; background: var(--panel-bg); color: var(--panel-ink); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7); border: 1px solid var(--panel-line); border-radius: 10px; box-shadow: 0 10px 34px rgba(5, 10, 50, .32); font-size: 13px; line-height: 1.3; }
.panel hr { border: 0; border-block-start: 1px solid var(--panel-line); margin: 4px 8px; }
.panel-title { padding: 4px 10px; font-weight: 600; font-size: 12px; opacity: .7; }
.row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 10px; border-radius: 5px; cursor: default; }
.row:not([disabled]):hover, .row:focus-visible, .row[aria-expanded=true] { background: #2A62E8; color: #fff; }
.row[disabled] { color: var(--panel-dim); }
.row-label { flex: 1; }
.row-more { width: 6px; height: 6px; flex: none; border-block-start: 1.6px solid currentColor; border-inline-end: 1.6px solid currentColor; transform: rotate(45deg); opacity: .7; }
[dir=rtl] .row-more { transform: rotate(-45deg); }
.row-icon { width: 15px; height: 15px; border-radius: 4px; background: url("icons/favicon.svg") center / cover no-repeat; flex: none; }
.row.back { font-weight: 500; }
.row.back::before { content: "‹"; }
[dir=rtl] .row.back::before { content: "›"; }
.demo[data-os=windows] .stage { font-family: "Segoe UI Variable", "Segoe UI", var(--font); }
.demo[data-os=windows] .panel { border-radius: 8px; padding: 4px; background: color-mix(in srgb, var(--panel-bg) 94%, var(--surface)); box-shadow: 0 8px 26px rgba(5, 10, 50, .26); }
.demo[data-os=windows] .row { padding: 7px 12px; border-radius: 4px; }
.demo[data-os=windows] .row:not([disabled]):hover, .demo[data-os=windows] .row:focus-visible, .demo[data-os=windows] .row[aria-expanded=true] { background: rgba(120, 130, 160, .22); color: var(--panel-ink); }
.toast { position: absolute; inset-inline: 16px; bottom: 18px; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); padding: 9px 16px; border-radius: 12px; background: rgba(12, 14, 26, .9); color: #fff; font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; text-align: center; }
.demo[data-os=windows] .toast { bottom: 54px; }
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast .strong { font-weight: 600; }
.toast-link { color: #BBC8FF; font-weight: 500; }
.bubble { position: absolute; top: 58px; inset-inline-start: 268px; padding: 7px 13px; border-radius: 10px 10px 10px 2px; background: #14151B; color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow); }
[dir=rtl] .bubble { border-radius: 10px 10px 2px 10px; }
.cursor { position: absolute; top: 0; left: 0; width: 24px; height: 24px; z-index: 5; transition: transform .58s cubic-bezier(.35, .05, .25, 1); pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.demo-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-block-start: 14px; }
.demo-note { color: var(--ink-3); font-size: 13.5px; flex: 1 1 280px; }
.os-switch { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.os-switch button { all: unset; padding: 4px 16px; border-radius: 8px; cursor: pointer; color: var(--ink-2); }
.os-switch button:focus-visible { outline: 2px solid var(--accent); }
.os-switch [aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 15, 40, .15); font-weight: 500; }

/* Sections */
.band { padding-block: clamp(56px, 8vw, 96px); }
.band.tint { background: var(--band-2); }
.head { text-align: center; max-width: 660px; margin: 0 auto clamp(30px, 4vw, 46px); }
.head p { color: var(--ink-2); font-size: 17px; margin-block-start: 12px; }
.head.start { text-align: start; margin: 0; }
.head.start .link { margin-block-start: 16px; }
.after { text-align: center; margin-block-start: 30px; }

/* Numbers */
.numbers-band { padding-block-end: clamp(24px, 3vw, 36px); }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.num { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; text-align: center; }
.num b { display: block; font-size: clamp(38px, 5vw, 54px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; background: linear-gradient(135deg, var(--num-a), var(--num-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num h3 { margin-block-start: 8px; }
.num p { color: var(--ink-3); font-size: 13.5px; margin-block-start: 4px; line-height: 1.45; }

/* Kinds */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin-inline: auto; width: fit-content; max-width: 100%; background: var(--surface-2); border-radius: 13px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role=tab] { all: unset; flex: none; padding: 7px 15px; border-radius: 9px; font-size: 14.5px; cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.tabs [role=tab]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabs [aria-selected=true] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(10, 15, 40, .14); }
.tab-panel { margin-block-start: 24px; }
.tab-panel[hidden] { display: none; }
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-block-end: 16px; }
.formats h3 { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-block-end: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12.5px; font-weight: 500; color: var(--ink-2); direction: ltr; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-shot, .card-line { height: 214px; border-radius: 12px; background: var(--surface-2); overflow: hidden; margin-block-end: 14px; }
.card-shot { padding: 16px 22px 0; }
.card-shot img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: var(--shadow-win); }
.card-line { display: flex; align-items: center; justify-content: center; padding: 14px; }
.card h3 { padding-inline: 4px; }
.card p { padding-inline: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-block: 4px 12px; flex: 1; }
.card .link { padding-inline: 4px; font-size: 13.5px; }

/* One-click picture */
.oneclick { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; font-size: 12.5px; line-height: 1.35; }
.oneclick-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; padding: 8px 12px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); max-width: 100%; }
.oneclick-ico { width: 14px; height: 14px; border-radius: 4px; background: url("icons/favicon.svg") center / cover no-repeat; flex: none; }
.line-app { font-weight: 500; }
.line-end { color: var(--accent); font-weight: 500; }
.sep { width: 5px; height: 5px; flex: none; border-block-start: 1.4px solid var(--ink-3); border-inline-end: 1.4px solid var(--ink-3); transform: rotate(45deg); margin-inline: 2px 3px; }
[dir=rtl] .sep { transform: rotate(-45deg); }
.oneclick .arrow { transform: rotate(90deg); color: var(--ink-3); }
.oneclick-result { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.fdoc { width: 14px; height: 18px; flex: none; border-radius: 3px; background: var(--accent-soft); border: 1px solid var(--accent); }

/* Several files */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.tile p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-block-start: 5px; }
.tile-art { display: block; width: 96px; height: 60px; margin-block-end: 14px; }
[dir=rtl] .tile-art { transform: scaleX(-1); }

/* Results */
.band.lapis { background: linear-gradient(170deg, var(--lapis-a), var(--lapis-b)); color: #fff; }
.lapis .head p { color: rgba(255, 255, 255, .84); }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.result { padding: 24px 22px; border-radius: var(--radius); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .17); }
.result b { display: block; font-size: clamp(25px, 2.8vw, 30px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin-block-end: 10px; }
:lang(ar) .result b { letter-spacing: 0; }
.result p { color: rgba(255, 255, 255, .84); font-size: 14px; line-height: 1.5; margin-block-start: 4px; }
.lapis .fine { color: rgba(255, 255, 255, .72); text-align: center; margin-block-start: 22px; }

/* Privacy */
.privacy { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.pvs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pv p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-block-start: 5px; }

/* Pricing */
.price-card { max-width: 500px; margin-inline: auto; padding: clamp(24px, 4vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.price-top { text-align: center; margin-block-end: 22px; }
.price-top img { display: block; margin: 0 auto 10px; border-radius: 15px; }
.price { margin-block-start: 6px; color: var(--ink-3); }
.price b { font-size: clamp(38px, 11vw, 52px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
:lang(ar) .price b { letter-spacing: 0; }
.ticks { display: grid; gap: 9px; }
.ticks li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.check { width: 18px; height: 18px; flex: none; color: var(--accent); margin-block-start: 2px; }
.price-card .buttons { margin-block-start: 26px; }
.price-card .btn { flex: 1 1 100%; }
.price-card .fine { text-align: center; margin-block-start: 14px; }

.currency { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 12px; font-size: 13.5px; color: var(--ink-3); }
.currency select { max-width: 230px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.price-list { display: grid; gap: 0; margin-block: 4px 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; }
.price-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px; color: var(--ink-2); }
.price-list li + li { border-block-start: 1px solid var(--line); }
.price-list bdi { color: var(--ink); font-weight: 500; }

/* Questions */
.qas { display: grid; gap: 10px; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.qa summary { display: flex; justify-content: space-between; gap: 16px; padding: 15px 18px; cursor: pointer; font-weight: 500; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 20px; line-height: 1.1; color: var(--ink-3); }
.qa[open] summary::after { content: "−"; }
.qa p { padding: 0 18px 16px; color: var(--ink-2); font-size: 15px; }

/* Last call */
.final { padding-block: clamp(60px, 9vw, 104px); text-align: center; background:
  linear-gradient(176deg, transparent 0 22%, var(--band-1) 22.2%) no-repeat; }
[dir=rtl] .final { background: linear-gradient(184deg, transparent 0 22%, var(--band-1) 22.2%) no-repeat; }
.final p { color: var(--ink-2); font-size: 17px; margin-block: 12px 24px; }

/* Footer */
.foot { background: var(--band-1); border-block-start: 1px solid var(--line); padding-block: 44px 28px; font-size: 14px; }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.foot-brand .logo { height: 34px; }
.foot-brand p { color: var(--ink-2); margin-block-start: 10px; }
.foot-col { display: grid; gap: 7px; align-content: start; }
.foot-col h2 { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; line-height: 1.5; }
.foot-col a { color: var(--ink-2); text-decoration: none; }
.foot-col a:hover { color: var(--ink); }
.foot-end { color: var(--ink-3); font-size: 13px; margin-block-start: 30px; }

/* Tools page */
.page-head { padding-block: clamp(44px, 7vw, 76px) 30px; text-align: center; background: linear-gradient(177deg, var(--band-1) 0 88%, transparent 88.4%) no-repeat; }
[dir=rtl] .page-head { background: linear-gradient(183deg, var(--band-1) 0 88%, transparent 88.4%) no-repeat; }
.page-head .lead { max-width: 62ch; margin: 16px auto 0; }
.index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 20px 24px; padding: 24px; margin-block: 14px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; }
.index-col { display: grid; gap: 4px; align-content: start; }
.index-col a { color: var(--ink-2); text-decoration: none; }
.index-col a:hover { color: var(--accent); }
.index-head { font-weight: 600; color: var(--ink) !important; margin-block-end: 4px; }
.tool-list { padding-block-end: 30px; }
.tool-group { padding-block-start: clamp(44px, 6vw, 68px); }
.tool-group > h2 { margin-block-end: 22px; }
.tool { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 52px); align-items: center; padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; margin-block-end: 16px; scroll-margin-top: 84px; }
.tool:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tag { color: var(--accent); font-size: 13px; font-weight: 500; margin-block-end: 4px; }
.tool h3 { font-size: clamp(21px, 2.5vw, 26px); font-weight: 600; line-height: 1.25; }
.tool-text > p:not(.tag):not(.fine) { color: var(--ink-2); margin-block: 7px 14px; }
.tool .fine { margin-block-start: 10px; }
.tool-formats { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin-block-start: 16px; font-size: 13px; }
.tool-formats dt { color: var(--ink-3); }
.tool-formats dd { display: flex; flex-wrap: wrap; gap: 4px; }
.tool-shot { background: var(--surface-2); border-radius: 16px; padding: clamp(14px, 3vw, 28px); max-height: 500px; overflow: hidden; }
.tool-shot img { display: block; width: min(100%, 400px); height: auto; margin-inline: auto; border-radius: 12px; box-shadow: var(--shadow-win); }
.tool-line { display: flex; background: var(--surface-2); border-radius: 16px; padding: 30px 18px; font-size: 14px; }
.tool-line .oneclick { font-size: 14px; }

/* Text pages */
.prose { padding-block: clamp(44px, 7vw, 76px); }
.prose h1 { font-size: clamp(32px, 5vw, 46px); }
.prose > .fine { margin-block-start: 8px; }
.prose .lead { margin-block-start: 18px; }
.prose h2 { font-size: 21px; letter-spacing: 0; margin-block: 30px 8px; }
.prose p { color: var(--ink-2); margin-block-end: 10px; }
.prose a { color: var(--accent); }

@media (max-width: 900px) {
  .numbers { grid-template-columns: 1fr 1fr; }
  .privacy { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .tool { grid-template-columns: 1fr; }
  .bubble { inset-inline-start: 26px; top: auto; bottom: 74px; }
}
@media (max-width: 720px) {
  .top-nav { display: none; }
  .top-in { gap: 10px; }
  .logo { height: 32px; }
  .stage { height: 620px; border-radius: 18px; }
  .files { inset-inline: 10px; top: 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .file { width: 100%; font-size: 11.5px; }
  .fname { padding-inline: 4px; max-width: 100%; }
  .formats { grid-template-columns: 1fr; }
  .pvs { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .numbers { gap: 10px; }
  .num { padding: 16px 12px; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .langs summary span { display: none; }
  .btn.small { padding: 7px 11px; font-size: 13px; }
  .hero .buttons .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}