/* MIDDLEWARE — questions.css (17 Sep 2026)
   The fourteen questions a prospect answers before the proposal and the demo. Same tokens, faces
   and rhythm as the one page (../site.css); nothing fetched from another host. Screen is the
   obsidian page; print is the paper twin in the Reading's palette (white, ink, one blue rule). */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(../fonts/ibm-plex-sans-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500.woff2) format("woff2")}

:root{
  --bg:#0A0A0D; --bg-2:#0F0F13; --surface:#15151B; --line:#24242C; --hair:#1A1A20;
  --text:#F4F4F7; --muted:#9A9AA8; --dim:#8A8A9E;
  --accent:#5AB0FF; --accent-2:#9AD4FF; --glow:rgba(90,176,255,.38); --glow-soft:rgba(90,176,255,.14);
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --arabic:"IBM Plex Sans Arabic","IBM Plex Sans","Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --p:0%;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:72px}   /* a focused box scrolls clear of the sticky header */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-family:var(--arabic);line-height:1.85}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:var(--arabic);letter-spacing:0;line-height:1.55}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#0A0A0D}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
html[lang="ar"] .n{font-size:.94em}
.lat{font-family:var(--sans);unicode-bidi:isolate;direction:ltr}   /* isolate alone inherits rtl: ".sql" would print as "sql." */
.nw{white-space:nowrap}
[dir="ltr"]{unicode-bidi:isolate}
.wrap{max-width:820px;margin:0 auto;padding:0 20px;padding-inline:clamp(20px,5vw,64px)}   /* plain values first: an old phone ignores clamp() */
/* both languages are in the page; the html lang picks one. A browser without JS shows the Arabic. */
html[lang="ar"] .i18n[lang="en"]{display:none}
html[lang="en"] .i18n[lang="ar"]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header: the mark, the count, the toggle, and a hairline that fills as he answers ---------- */
.hd{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;padding:14px clamp(16px,3vw,40px);min-height:60px;background:rgba(10,10,13,.94);border-bottom:1px solid var(--line)}
.hd::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:var(--p);background:var(--accent);box-shadow:0 0 10px var(--glow);transition:width .35s ease-out}
.wm{display:inline-block;line-height:0}
.wm img{height:14px;width:auto}
.wm-print{display:none}
.hd-end{display:flex;align-items:center}
.hd-end>*+*{margin-inline-start:14px}   /* margins, not gap: flex gap is 2021 on iOS */
.prog{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
html[lang="ar"] .prog .i18n{font-family:var(--arabic);font-size:13px;letter-spacing:0}
html[lang="ar"] .prog .n{font-size:12px}   /* the two digits of «3 من 14» at one size */
.prog b{font-weight:500;color:var(--accent)}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.08em;background:rgba(10,10,13,.5);border:1px solid var(--line);color:var(--text);
  padding:8px 11px 7px;border-radius:6px;cursor:pointer;min-width:44px;line-height:1;transition:border-color .2s}
.lang:hover{border-color:var(--accent)}
.lang[lang="ar"]{font-family:var(--arabic);font-size:13px;letter-spacing:0;padding:6px 11px}

/* ---------- the opening ---------- */
.intro{padding-block:clamp(48px,9vw,96px) clamp(8px,2vw,16px)}
.eyebrow{display:flex;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;line-height:1.4}
.eyebrow .n{color:var(--accent);font-weight:500;margin-inline-end:14px}
html[lang="ar"] .eyebrow span:not(.n){font-family:var(--arabic);font-size:13.5px;letter-spacing:0;text-transform:none}   /* the site's own eyebrow, verbatim */
h1{font-size:36px;font-size:clamp(32px,6vw,54px);line-height:1.05;letter-spacing:-.03em;color:#fff;max-width:18ch}
html[lang="ar"] h1{font-size:32px;font-size:clamp(30px,5.4vw,50px);line-height:1.4;letter-spacing:0}
.for{margin:16px 0 0;font-size:15px;color:var(--accent-2);font-family:var(--mono);overflow-wrap:anywhere}
html[lang="ar"] .for{font-family:var(--arabic);font-size:16px}
.lede{margin:22px 0 0;font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:56ch}
.saved{margin:26px 0 0;font-size:14px;color:var(--dim);max-width:56ch;padding-inline-start:16px;border-inline-start:2px solid var(--accent)}
html[lang="ar"] .saved{font-size:14.5px}
.dataNote{margin:18px 0 0;font-size:14px;color:var(--muted);max-width:56ch}

/* ---------- the three parts ---------- */
.blk{padding-block:clamp(48px,7vw,88px) 0}
.blk .wrap::before{content:"";display:block;height:1px;margin-bottom:clamp(26px,4vw,40px);
  background:linear-gradient(to right,var(--accent) 0,rgba(90,176,255,.35) 22%,var(--line) 48%,var(--line) 100%)}
html[dir="rtl"] .blk .wrap::before{background:linear-gradient(to left,var(--accent) 0,rgba(90,176,255,.35) 22%,var(--line) 48%,var(--line) 100%)}
h2{font-size:28px;font-size:clamp(26px,3.4vw,40px);line-height:1.15;max-width:26ch;margin:0 0 24px;margin:0 0 clamp(22px,3vw,32px)}

/* ---------- a question ---------- */
.qs{list-style:none;margin:0;padding:0}
.q+.q{margin-top:14px}
.q{position:relative;padding:20px 20px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);transition:border-color .2s,box-shadow .2s}
.q:focus-within{border-color:rgba(90,176,255,.6);box-shadow:0 12px 40px -24px var(--glow)}
.q.done{border-color:rgba(90,176,255,.38)}
.qh{display:flex;align-items:baseline;margin:0 0 6px}
.qn{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--muted);flex:none;margin-inline-end:12px;transition:color .2s}
.q.done .qn{color:var(--accent)}
.q h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
html[lang="ar"] .q h3{font-size:18.5px}
.q h3 label{cursor:pointer}
.qt{color:var(--muted);font-size:16px;margin:0 0 14px;max-width:62ch}
html[lang="ar"] .qt{font-size:16.5px}
textarea{display:block;width:100%;min-height:74px;padding:12px 14px;margin:0;background:var(--surface);border:1px solid #62626E;border-radius:8px;   /* 3.2:1 on the card: the box he types in must read as a box */
  color:var(--text);font:inherit;font-size:16px;line-height:1.6;resize:none;-webkit-appearance:none;appearance:none;overflow:hidden;transition:border-color .2s,box-shadow .2s}
html[lang="ar"] textarea{line-height:1.8}
textarea::placeholder{color:var(--dim);opacity:1}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow-soft)}
.note{margin:10px 0 0;font-size:13.5px;color:var(--dim)}
.qnote{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--muted);max-width:60ch;padding-inline-start:14px;border-inline-start:2px solid var(--accent)}
html[lang="ar"] .qnote{font-size:14.5px;line-height:1.8}
html[lang="ar"] .note{font-size:14px}

/* one-tap answers: real radios, drawn as pills; a second tap clears (questions.js) */
.chips{border:0;margin:0 -4px 8px;padding:0;display:flex;flex-wrap:wrap}
.chips label{position:relative;display:inline-flex;margin:-4px 4px 4px;padding:4px 0}   /* the label is the tap target: 44px tall, the pill unchanged */
.chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chips label>span{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid #4A4A56;border-radius:999px;font-size:14px;font-weight:500;line-height:1.3;color:var(--text);
  background:var(--bg);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background-color .2s,color .2s}
html[lang="ar"] .chips label>span{font-size:14.5px;padding:7px 14px 8px}
.chips label>span:hover{border-color:var(--accent)}
.chips input:checked+span{background:var(--accent);border-color:var(--accent);color:#0A0A0D}
.chips input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- send ---------- */
.send{padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px)}
.send h2{margin-bottom:12px}
.send .lede{margin:0 0 28px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#0A0A0D;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:17px;line-height:1;padding:18px 30px;border-radius:8px;white-space:nowrap;
  box-shadow:0 0 0 0 var(--glow);transition:box-shadow .25s,transform .2s,background-color .2s}
.btn:hover{background:var(--accent-2);box-shadow:0 0 28px var(--glow);transform:translateY(-1px)}
html[lang="ar"] .btn{font-family:var(--arabic);font-size:18px;padding:15px 28px 17px}
.cta{margin:0}
.long{display:none;margin:12px 0 0;font-size:14px;color:var(--muted);max-width:52ch}
body.long .long{display:block}
.alt{display:flex;flex-wrap:wrap;margin:18px -5px 0}
.alt>*{margin:0 5px 10px}
.ghost{display:inline-block;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:11px 16px;font:inherit;font-size:14px;line-height:1;cursor:pointer;text-decoration:none;text-align:center;transition:border-color .2s}
html[lang="ar"] .ghost{font-size:15px;padding:9px 16px 11px}
.ghost:hover{border-color:var(--accent)}
.ghost .flash{display:none}
.ghost.did .lbl{display:none}
.ghost.did .flash{display:inline}
.phone{margin-top:26px;font-size:14px;color:var(--muted)}
.phone a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px;font-family:var(--mono)}
html[lang="ar"] .phone{font-size:15px}
.clear{margin-top:34px}
.clear .ghost{border-color:transparent;color:var(--dim);padding-inline:0}
.clear .ghost:hover{color:var(--text)}
.printNote{display:none}

/* ---------- foot ---------- */
.ft{border-top:1px solid var(--line);padding:32px 0 56px;color:var(--dim);font-size:13px}
html[lang="ar"] .ft{font-size:14px}
.ft .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.ft .wrap::before{display:none}
.wm-ft img{height:11px}

@media (max-width:520px){
  .q{padding:16px 15px 15px;border-radius:10px}
  .qt{margin-bottom:12px}
  .btn{width:100%;justify-content:center}
  .alt .ghost{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion: reduce){
  *,::before,::after{transition:none !important;animation:none !important}
}

/* ---------- paper: the same page printed, in the Reading's palette ---------- */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  :root{--bg:#fff;--bg-2:#fff;--surface:#fff;--line:#E3E3E8;--hair:#E3E3E8;--text:#111114;--muted:#6B6B78;--dim:#6B6B78;   /* the Reading's paper: ink, one grey, one blue */
    --accent:#1E6BE8;--accent-2:#1E6BE8;--glow:transparent;--glow-soft:transparent;color-scheme:light}
  html,body{background:#fff;color:#111114;font-size:12.5pt}
  html[lang="ar"] body{line-height:1.75}
  .hd{position:static;background:none;border:0;padding:0 0 8mm;min-height:0}
  .hd::after,.hd-end,.wm-screen,.saved,.cta,.long,.alt,.clear,.send h2,.send .lede{display:none}
  .wm-print{display:block}
  .wm img{height:12px}
  .wrap{max-width:none;padding-inline:0}
  .intro{padding-block:0 4mm}
  h1{font-size:26pt;color:#111114}
  html[lang="ar"] h1{font-size:24pt}
  .lede{font-size:12.5pt;margin-top:4mm}
  .dataNote{font-size:11pt}
  .blk{padding-block:8mm 0}
  .blk .wrap::before{margin-bottom:6mm;background:linear-gradient(to right,#1E6BE8 0,#1E6BE8 22%,#E3E3E8 48%,#E3E3E8 100%)}
  html[dir="rtl"] .blk .wrap::before{background:linear-gradient(to left,#1E6BE8 0,#1E6BE8 22%,#E3E3E8 48%,#E3E3E8 100%)}
  .blk .wrap::before,.blk .eyebrow,.blk h2{break-after:avoid;page-break-after:avoid}   /* a section heading never sits alone at a page foot */
  h2{font-size:18pt;margin-bottom:5mm}
  .q{break-inside:avoid;page-break-inside:avoid;padding:4mm 5mm;border-color:var(--line);border-radius:2mm;box-shadow:none}
  .q+.q{margin-top:4mm}
  .q h3{font-size:12.5pt}
  .qt{font-size:11pt;margin-bottom:3mm;color:#3B3B46}
  textarea{min-height:30mm;border-color:#C9C9D2;background:#fff;resize:none;font-size:11pt;border-radius:1.5mm;overflow:visible}   /* the pen box keeps a firmer edge than the hairlines */
  #a3,#a10,#a13{min-height:40mm}   /* the three that ask for a paragraph */
  textarea::placeholder{color:transparent}
  .chips{margin-bottom:2mm}
  .chips label{margin:0 1mm 2mm;padding:0}
  .chips label>span{padding:1.5mm 4mm;font-size:10pt;border-color:#C9C9D2;background:#fff;color:#111114}
  .chips input:checked+span{background:#1E6BE8;border-color:#1E6BE8;color:#fff}
  .note{font-size:9.5pt}
  .qnote{font-size:10pt;margin-bottom:3mm}
  .send{padding-block:6mm 0;break-inside:avoid;page-break-inside:avoid}   /* the closing lines stay on one page; the mark is on page 1, so the foot is not printed */
  .ft{display:none}
  .phone{margin-top:0;font-size:11pt}
  .printNote{display:block;margin:0 0 3mm;font-size:11pt;color:#111114;padding-inline-start:4mm;border-inline-start:2px solid #1E6BE8}
}

/* ---------- voice (20 Sep 2026) ----------
   Shown by questions.js only on a phone that can record AND hand a file to WhatsApp; hidden
   otherwise, and the card is exactly what it was. The mic is a ghost pill under the box, the
   recording a small player beside a delete. Red while it records, and the seconds tick. */
.voice{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.voice[hidden],.rec[hidden],.vsend[hidden],.vfail[hidden]{display:none}   /* a class with display: beats the hidden attribute; say it twice */
.mic{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;background:none;border:1px solid #4A4A56;border-radius:999px;color:var(--text);font:inherit;font-size:14px;line-height:1.3;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
html[lang="ar"] .mic{font-size:15px}
.mic svg{flex:none;color:var(--accent)}
.mic:hover{border-color:var(--accent)}
.mic:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mic .on,.mic .sec{display:none}
.q.recording .mic{border-color:#FF6B6B;background:rgba(255,107,107,.1);color:#FFD1D1}
.q.recording .mic svg{color:#FF6B6B;animation:mw-pulse 1.1s ease-in-out infinite}
.q.recording .mic .lbl{display:none}
.q.recording .mic .on,.q.recording .mic .sec{display:inline}
.mic .sec{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:#FF6B6B}
@keyframes mw-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.q.recording .mic svg{animation:none}}
.rec{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;margin-top:2px}
.rec .rl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);white-space:nowrap}
html[lang="ar"] .rec .rl{font-family:var(--arabic);font-size:13px;letter-spacing:0}
.rec audio{flex:1 1 120px;min-width:120px;height:40px;max-width:360px}   /* label + player + delete on one line at 390px */
.rec .del{padding:8px 12px 9px;font-size:13px;color:var(--muted)}
.rec .del:hover{color:var(--text)}
.vfail{color:#FFB4B4}
.vsend{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.vsend .cta .btn{background:var(--surface);color:var(--text);border:1px solid var(--accent);box-shadow:none}
.vsend .cta .btn:hover{background:var(--bg-2);box-shadow:0 0 22px var(--glow-soft)}
.vsend .btn .flash{display:none}
.vhow{margin:12px 0 0;font-size:14px;color:var(--muted);max-width:52ch}
html[lang="ar"] .vhow{font-size:15px}