/* The pilot questionnaire. Same world as the site — «المكس» — in its quietest register:
   a violet-tinted near-white ground, one white surface per block, Alexandria for words and
   Changa for numbers, depth from a soft offset shadow rather than from borders.

   Everything here is sized for a thumb on a phone in a landing between classes: options are
   full-width tap targets, not a native <select> nobody can read, and nothing needs a zoom.
   Standalone on purpose — it does not load /site.css, because this folder has to work when it
   is dropped on a host that has never heard of the rest of the product. */

@font-face {
  font-family:"Alexandria"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("fonts/alexandria-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family:"Alexandria"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("fonts/alexandria-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Changa"; font-style:normal; font-weight:500 800; font-display:swap;
  src:url("fonts/changa-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family:"Changa"; font-style:normal; font-weight:500 800; font-display:swap;
  src:url("fonts/changa-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  color-scheme:light;
  --bg:#F6F4FB; --surface:#FFFFFF; --surface-2:#F1EFF8; --line:#EBE7F6;
  --ink:#15121F; --ink-2:#5D5977; --ink-3:#8B87A2;
  --violet:#7B2FF7; --magenta:#F107A3;
  --grad:linear-gradient(94deg,#7B2FF7,#F107A3);
  --green:#0A7550; --green-wash:#E3F8ED;
  --red:#B3261E;
  --shadow:0 3px 16px rgba(21,18,31,.07);
  --shadow-2:0 14px 44px rgba(21,18,31,.13);
  --out:cubic-bezier(.16,.84,.3,1);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* The browser's own [hidden] rule is display:none, and any author display beats it. Both the
   progress rail and the thank-you panel set one, so without this they would be on screen from
   the first paint - the rail showing a bar nobody has started, the thanks thanking nobody. */
[hidden] { display:none !important; }
/* The header is sticky and 58px tall, so an anchor jump — «ابدأ من هنا» points at #q — lands
   the heading it jumped to underneath it. This is the browser's own scrolling, so it is the
   browser that has to be told. */
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body {
  position:relative; margin:0; background:var(--bg); color:var(--ink);
  font-family:"Alexandria","Segoe UI",system-ui,-apple-system,"Tahoma",sans-serif;
  font-size:16px; line-height:1.75; font-weight:300; -webkit-font-smoothing:antialiased;
  /* position:relative only so the decorative ground has something to be absolute against. No
     overflow rule here on purpose: nothing bleeds past the page's own width, and an overflow on
     the body is what quietly breaks the sticky header and the fixed progress rail together. */
}
::selection { background:#E4D8FE; color:#2A1060; }
img,svg { max-width:100%; }
:where(a,button,summary,input,textarea):focus-visible {
  outline:2.5px solid var(--violet); outline-offset:3px; border-radius:10px;
}

/* ---- frame ------------------------------------------------------------------------------ */

/* Opaque, not blurred. A backdrop-filter here re-blurs the whole width of the page on every
   frame anything underneath it changes, and on a cheap Android that is the frame budget a tap
   was waiting for. Over a ground this close to white it was invisible anyway. */
.bar { position:sticky; top:0; z-index:5; background:rgba(247,245,252,.9);
       border-bottom:1px solid var(--line); }
.bar .in, footer .in, main > section, .hero {
  max-width:760px; margin-inline:auto; padding-inline:20px;
}
.bar .in { display:flex; align-items:center; justify-content:space-between; height:58px; }
.mark { display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; }
.mark img { border-radius:8px; }
.bar-side { display:flex; align-items:center; gap:8px; }
.when { font-family:"Changa",sans-serif; font-size:12px; font-weight:600; color:var(--violet);
        background:#F0E8FE; border-radius:999px; padding:5px 12px; white-space:nowrap; }

/* The way to reach a person, kept in the corner of every screen rather than only at the end of
   the page. A teacher who would rather talk than tick should not have to scroll to find that out. */
.wapill {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:12.5px; font-weight:600; color:#0A7550; background:var(--green-wash);
  border:1px solid #C2EEDA; border-radius:999px; padding:5px 12px 5px 10px; white-space:nowrap;
  transition:transform .2s var(--out), box-shadow .2s, background .2s;
}
.wapill svg { width:15px; height:15px; }
.wapill:hover { transform:translateY(-1px); background:#D7F5E7;
                box-shadow:0 6px 14px rgba(10,117,80,.16); }
@media (max-width:430px) { .when { display:none; } }

main > section { padding-block:46px; }
/* The progress rail is fixed to the bottom of the screen, so the last thing on the page needs
   room underneath it or the rail sits on top of the way to reach a person. */
footer { border-top:1px solid var(--line); margin-top:40px;
         padding-block:26px calc(26px + 58px); }
footer .in { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-3); }
footer .dim { color:#A9A5BE; }

/* Arabic is cursive and stacks its marks above and below the line, so the two habits a Latin
   headline is set with both break it: negative tracking pulls the shadda of one word onto the
   letter beside it, and a 1.35 line-height lets the tail of a ق on the second line touch the
   marks on the first. Neither is a matter of taste — the glyphs literally overlap. */
h1,h2,h3 { line-height:1.45; margin:0; font-weight:700; letter-spacing:normal; }
p { margin:0; }

/* ---- hero ------------------------------------------------------------------------------- */

.hero { padding-block:52px 34px; }
.eyebrow { font-family:"Changa",sans-serif; font-size:12.5px; font-weight:600; color:var(--magenta);
           letter-spacing:.02em; margin-bottom:14px; }
.hero h1 { font-size:clamp(29px,7vw,42px); line-height:1.55; }
/* background-clip:text paints the gradient inside the element's box, and Arabic descenders hang
   below it — so without the padding the bottom of every ق and ف is simply not coloured in. */
.hero h1 span { display:inline-block; padding-block:.06em .12em;
                background:var(--grad); -webkit-background-clip:text; background-clip:text;
                color:transparent; }
.lead { margin-top:16px; font-size:17px; color:var(--ink-2); max-width:56ch; }
.note { margin-top:14px; font-size:13px; color:var(--ink-3); }

.go {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px; margin-top:24px; color:#fff;
  text-decoration:none; font-weight:600; font-size:16px; padding:14px 30px; border-radius:13px;
  background:linear-gradient(94deg,#7B2FF7,#F107A3,#7B2FF7); background-size:220% 100%;
  background-position:0 0;
  box-shadow:0 8px 22px rgba(123,47,247,.28);
  transition:transform .2s var(--out), box-shadow .2s, background-position .7s var(--out);
}
.go .arrow { width:18px; height:18px; transition:transform .28s var(--out); }
.go:hover { transform:translateY(-2px); background-position:100% 0;
            box-shadow:0 12px 30px rgba(123,47,247,.34); }
.go:hover .arrow { transform:translateX(-4px); }
.go:active { transform:translateY(0); }

/* A sheen that crosses the button once on hover. It is the only thing on the page that moves
   for no reason other than to be noticed, and it is over in half a second. */
.go::after, .send::after {
  content:""; position:absolute; inset:0; z-index:-1; translate:-140% 0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.32) 50%,transparent 80%);
}
.go:hover::after, .send:hover::after { animation:sheen .75s var(--out); }
@keyframes sheen { from { translate:-140% 0; } to { translate:140% 0; } }

/* ---- what it does ----------------------------------------------------------------------- */

h2 { font-size:clamp(22px,5vw,28px); }
.sub { margin-top:10px; color:var(--ink-2); font-size:15px; max-width:56ch; }

.cards { display:grid; gap:14px; margin-top:26px; }
@media (min-width:660px) { .cards { grid-template-columns:1fr 1fr; } }
.cards article {
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px 22px 24px; box-shadow:var(--shadow);
  transition:transform .3s var(--out), box-shadow .3s var(--out), border-color .3s;
}
.ic { display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
      background:#F0E8FE; color:var(--violet); margin-bottom:14px;
      transition:transform .3s var(--out), background .3s; }
.ic svg { width:22px; height:22px; }
/* Only where a cursor exists. On a phone these are read, not hovered, and a hover state that
   sticks after a tap is a card that stays lifted for no reason anybody can undo. */
@media (hover:hover) and (pointer:fine) {
  .cards article:hover { transform:translateY(-3px); box-shadow:var(--shadow-2);
                         border-color:#E0D4FA; }
  .cards article:hover .ic { transform:scale(1.06) rotate(-4deg); background:#E7DAFE; }
}
.cards h3 { font-size:19px; }
.cards p { margin-top:8px; font-size:14.5px; color:var(--ink-2); line-height:1.8; }
.cards b, .steps b, .fine b, .hint b { font-weight:600; color:var(--ink); }

.steps { margin-top:30px; background:var(--surface-2); border-radius:16px; padding:24px 22px; }
.steps h3 { font-size:17px; }
.steps ol { margin:14px 0 0; padding:0; list-style:none; counter-reset:s; display:grid; gap:13px; }
/* Three grid items to two columns: the counter, the title and the line under it. The column was
   `auto`, so the third item wrapped into it and stretched it to its own width — which is what
   pushed every title half a screen away from its number. Both the title and the line belong in
   column two, said out loud, and the number's column is the width of the number. */
.steps li { counter-increment:s; display:grid; grid-template-columns:26px 1fr; gap:2px 11px;
            align-items:start; }
.steps li::before {
  content:counter(s,arabic-indic); font-family:"Changa",sans-serif; font-weight:700; font-size:13px;
  color:var(--violet); background:#fff; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; grid-column:1; grid-row:1 / span 2; margin-top:1px;
}
.steps li b { grid-column:2; font-size:15px; line-height:1.6; }
.steps li span { grid-column:2; font-size:14px; color:var(--ink-2); }
.fine { margin-top:16px; font-size:13px; color:var(--ink-3); line-height:1.8; }
.fine.mid { text-align:center; }

/* ---- the phone --------------------------------------------------------------------------- */
/* The page's one authored moment, and the only thing on it that moves because moving is the
   point: a parent's screen filling in, and then the message that put the link in their hand
   landing on top of it. Everything above this is a claim; this is the claim happening.

   Built the same way as the phone on the landing page - the same polished rail, the same sheet
   of glass across the face, the app's own markup at the size it ships - showing the one screen
   that one does not: what an ولي أمر opens. It runs once when it is reached and then rests.
   With no script it is simply already arrived, like everything else here. */

.see { padding-top:0 !important; }
.show { margin-top:30px; }
/* The padding at the foot is where the message hangs. It is measured rather than guessed: the
   card is allowed to overlap the phone's bottom edge and nothing else, because every line on
   that screen is part of the argument and a decoration that covers one is a line not read. */
/* One width everywhere. The screen's contents are set in pixels, so a bigger frame on a desktop
   is the same page in a taller box — it gains empty glass at the foot, not presence. */
.see .hold { position:relative; width:min(270px,66vw); margin-inline:auto;
             padding-block-end:88px; }
/* The shadow belongs to the ground it is cast on, so it is an ellipse under the phone rather
   than a glow around it. */
.see .hold::before {
  content:""; position:absolute; inset-inline:7%; inset-block-end:66px; height:30px;
  border-radius:50%; background:rgba(21,18,31,.20); filter:blur(15px);
}

.see .device {
  position:relative; border-radius:46px; padding:2.5px;
  background:conic-gradient(from 200deg,#5E5870,#DAD5E8 7%,#443F53 20%,#A49DB6 32%,
                            #2B2734 46%,#CFC9DE 60%,#4C4659 74%,#B0A9C2 87%,#5E5870);
  box-shadow:0 36px 62px -28px rgba(21,18,31,.46), 0 12px 26px -12px rgba(21,18,31,.26);
}
.see .body { border-radius:44px; padding:9px;
             background:linear-gradient(155deg,#26222F,#0D0B13 30%,#08070C 62%,#1A1722); }
.see .side { position:absolute; width:3px; border-radius:3px;
             background:linear-gradient(90deg,#3E3949,#C4BED4,#2F2B39); }
.see .v1 { inset-inline-start:-3px; inset-block-start:104px; height:26px; }
.see .v2 { inset-inline-start:-3px; inset-block-start:138px; height:26px; }
.see .pw { inset-inline-end:-3px; inset-block-start:128px; height:46px; }

.see .screen { position:relative; border-radius:36px; overflow:hidden; background:var(--bg);
               aspect-ratio:9 / 19.3; }
.see .island { position:absolute; inset-block-start:8px; inset-inline-start:50%; z-index:6;
               transform:translateX(-50%); width:74px; height:21px; border-radius:20px;
               background:#06050A; }
.see .island::after { content:""; position:absolute; inset-inline-end:7px; inset-block-start:50%;
                      margin-block-start:-4px; width:8px; height:8px; border-radius:50%;
                      background:radial-gradient(circle at 35% 30%,#453E5C,#0A0810 62%); }
/* One sheet of glass catching the light across the whole face — the detail that separates a
   phone from a rounded rectangle. */
.see .glass { position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:36px;
              background:linear-gradient(116deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.11) 42%,
                         rgba(255,255,255,.02) 49%,rgba(255,255,255,0) 57%); }

.see .sbar { position:absolute; inset:0 0 auto; height:38px; z-index:5; padding:12px 18px 0;
             display:flex; align-items:center; font-family:"Changa",sans-serif;
             font-size:11px; font-weight:600; color:var(--ink); }
.see .sbar .sp { margin-inline-start:auto; display:flex; align-items:center; gap:5px; }
.see .sbar svg { display:block; height:10px; width:auto; }

.see .pane { position:absolute; inset:0; padding:44px 12px 0; }
.see .who { display:flex; align-items:center; gap:9px; }
.see .av { flex:none; display:grid; place-items:center; width:36px; height:36px;
           border-radius:12px; background:linear-gradient(140deg,#B78BFF,#7B2FF7);
           color:#fff; font-size:16px; font-weight:700; line-height:1; }
.see .wg { display:flex; flex-direction:column; min-width:0; line-height:1.45; }
.see .wg b { font-size:14.5px; font-weight:700; }
.see .wg s { text-decoration:none; font-size:10.5px; color:var(--ink-3); }

.see .figs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:15px; }
.see .figs div { background:var(--surface); border:1px solid var(--line); border-radius:13px;
                 padding:10px 4px 9px; text-align:center; }
.see .figs b { display:block; font-family:"Changa",sans-serif; font-size:19px; font-weight:700;
               color:var(--violet); line-height:1.3; }
.see .figs .ab b { color:var(--ink-3); }
.see .figs .pc b { color:var(--green); }
.see .figs s { text-decoration:none; display:block; font-size:9.5px; color:var(--ink-3);
               line-height:1.45; margin-top:2px; }

.see .meter { height:7px; border-radius:99px; background:#E9E4F6; overflow:hidden; margin-top:12px; }
.see .meter i { display:block; height:100%; width:88%; border-radius:99px; background:var(--grad); }

.see .lines { margin-top:14px; display:grid; gap:7px; }
.see .ln { display:flex; align-items:center; justify-content:space-between; gap:8px;
           background:var(--surface); border:1px solid var(--line); border-radius:12px;
           padding:10px 12px; font-size:11px; line-height:1.5; }
.see .ln .k { color:var(--ink-3); }
.see .ln .v { font-weight:600; font-size:11.5px; white-space:nowrap; }
.see .tg { font-family:"Changa",sans-serif; font-size:10px; font-weight:600;
           border-radius:99px; padding:3px 9px; white-space:nowrap; }
.see .tg.ok { background:var(--green-wash); color:var(--green); }

.see .last { display:block; margin-top:15px; }
.see .lh { display:block; font-size:10px; color:var(--ink-3); margin-bottom:7px;
           padding-inline-start:2px; }
.see .lr { display:flex; align-items:center; gap:8px; font-size:11px; line-height:1.5;
           padding:6px 2px; border-block-start:1px solid var(--line); }
.see .lr:first-of-type { border-block-start:0; }
.see .lr i { flex:none; width:7px; height:7px; border-radius:50%; }
/* The five attendance states carry shape as well as colour everywhere else in the product;
   two of them here, and the absent one is hollow so it is not colour alone that says so. */
.see .lr i.on { background:var(--green); }
.see .lr i.off { background:transparent; box-shadow:inset 0 0 0 1.6px #C9A0A0; }
.see .lr b { font-weight:500; color:var(--ink-2); }
.see .lr s { text-decoration:none; margin-inline-start:auto; font-weight:600; color:var(--green); }
.see .lr s.no { color:#A8736E; }

/* Caught on the bottom corner of the phone, half on the glass and half off the side of it —
   near enough to be the thing that opened the screen, clear enough of it to cover no line. */
.see .msg {
  position:absolute; z-index:8; inset-inline-start:-20px; inset-block-end:0;
  width:min(228px,64vw); background:#fff; border:1px solid #E7E3F2; border-radius:16px;
  padding:12px 13px 11px;
  box-shadow:0 20px 40px -14px rgba(21,18,31,.32), 0 6px 14px -6px rgba(21,18,31,.14);
}
.see .mh { display:flex; align-items:center; gap:7px; }
.see .mh img { border-radius:6px; }
.see .mh b { font-size:11.5px; font-weight:700; }
.see .mh s { text-decoration:none; margin-inline-start:auto; font-family:"Changa",sans-serif;
             font-size:10px; color:var(--ink-3); }
.see .msg p { margin-top:7px; font-size:11.5px; line-height:1.7; color:var(--ink-2); }
.see .ml { display:block; margin-top:8px; font-size:11px; font-weight:600; color:var(--green); }

.see .fine.mid { margin-top:26px; }

/* The sequence. Six short arrivals in order, then the message — about a second and a half from
   the block being reached, and nothing after that. Every one of these has its finished state as
   its default, so a page with no script shows a phone that has already filled in. */
.motion .see .who,
.motion .see .figs,
.motion .see .ln,
.motion .see .last { opacity:0; translate:0 8px; }
.motion .see .meter i { width:0; }
.motion .see .msg { opacity:0; translate:0 14px; scale:.94; }

.motion .show.up .who,
.motion .show.up .figs,
.motion .show.up .ln,
.motion .show.up .last {
  opacity:1; translate:0 0;
  transition:opacity .34s var(--out), translate .44s var(--out);
  transition-delay:calc(240ms + var(--i,0) * 85ms);
}
.motion .show.up .meter i { width:88%; transition:width .8s var(--out) .44s; }
.motion .show.up .msg {
  opacity:1; translate:0 0; scale:1;
  transition:opacity .38s var(--out) .92s, translate .55s var(--out) .92s,
             scale .55s var(--out) .92s;
}

/* ---- the questions ---------------------------------------------------------------------- */

.ask { padding-bottom:26px; }
.part { border:0; margin:26px 0 0; padding:0; }
.part legend {
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px;
  padding:0; margin-bottom:4px;
}
.part legend i {
  font-family:"Changa",sans-serif; font-style:normal; font-size:13px; font-weight:700; color:#fff;
  background:var(--grad); width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
}
.part.quiet legend { color:var(--ink-2); }
.part.quiet legend i { background:var(--ink-3); }

.q {
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:20px; margin-top:14px; box-shadow:var(--shadow);
}
.ask-l { display:block; font-weight:500; font-size:16px; line-height:1.7; }
/* Deliberately allowed to wrap. These hints are long in Arabic, and a nowrap here pushed the
   whole document wider than the phone — which in RTL means the question text runs off the
   right edge, where nobody scrolls to look for it. */
.ask-l em { font-style:normal; font-weight:400; font-size:12.5px; color:var(--ink-3);
            margin-inline-start:6px; }
.ask-l b { font-weight:700; }
.hint { margin-top:8px; font-size:13.5px; color:var(--ink-3); line-height:1.75; }

.opts { display:grid; gap:8px; margin-top:14px; }
.opts label {
  position:relative; display:flex; align-items:center; gap:11px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:15px; color:var(--ink-2); background:var(--surface);
  /* No 300ms wait to find out whether this tap was the start of a scroll. */
  touch-action:manipulation;
  transition:border-color .14s, background .14s, color .14s, box-shadow .18s;
}
.opts input { position:absolute; opacity:0; width:0; height:0; }
.opts label::before {
  content:""; flex:none; width:19px; height:19px; border-radius:50%;
  border:1.8px solid #CFC8E4; transition:border-color .14s, box-shadow .14s, background .14s;
}
.opts[data-multi] label::before { border-radius:6px; }

/* Only where there is a pointer that can hover. A phone has no hover and Chrome leaves the
   state stuck on the last thing tapped, so this used to shove the row you had just answered
   two pixels sideways and leave it there - which reads as the page stuttering, not as a hover. */
@media (hover:hover) and (pointer:fine) {
  .opts label { transition:border-color .14s, background .14s, color .14s, box-shadow .18s,
                           transform .14s var(--out); }
  .opts label:hover { border-color:#D8D0F0; transform:translateX(-2px); }
}

.opts label:has(input:checked) {
  border-color:var(--violet); background:#FAF6FF; color:var(--ink); font-weight:500;
  box-shadow:0 3px 12px rgba(123,47,247,.13);
}
.opts label:has(input:checked)::before {
  border-color:var(--violet); background:var(--violet);
  box-shadow:inset 0 0 0 3.5px #fff;
  animation:pick .2s var(--out);
}
/* The whole of the feedback, and deliberately the whole of it: the row changes colour and the
   dot fills, both the instant the input is checked. It used to also run a light across the row,
   which meant every tap queued a second animation behind a compositor that was already busy
   drifting three blurred circles - so the confirmation you were waiting for arrived late. The
   confirmation is the state. Two hundred milliseconds is feedback; half a second is latency. */
@keyframes pick {
  0% { transform:scale(.5); }
  60% { transform:scale(1.16); }
  100% { transform:scale(1); }
}
.opts[data-multi] label:has(input:checked)::before { box-shadow:inset 0 0 0 3px #fff; }
.opts label:has(input:focus-visible) { outline:2.5px solid var(--violet); outline-offset:2px; }

@media (min-width:560px) {
  .opts.chips { grid-template-columns:1fr 1fr; }
}

input[type=text], input[type=tel], textarea {
  width:100%; margin-top:12px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface-2); border:1.5px solid transparent; border-radius:12px;
  padding:13px 15px; line-height:1.7; resize:vertical;
}
input::placeholder, textarea::placeholder { color:#A9A5BE; }
input[type=text], input[type=tel], textarea { caret-color:var(--violet); }
input[type=text]:focus, input[type=tel]:focus, textarea:focus {
  outline:none; border-color:var(--violet); background:#fff;
}
.q.open { border-color:#E0D4FA; background:linear-gradient(180deg,#FBF8FF,#FFFFFF 60%); }

.two { display:grid; gap:12px; }
@media (min-width:560px) { .two { grid-template-columns:1fr 1fr; } }
.two .q { margin-top:14px; }

.q.missing { border-color:var(--red); }
.err {
  margin-top:18px; background:#FDECEA; border:1px solid #F3C6C2; color:var(--red);
  border-radius:12px; padding:12px 15px; font-size:14px;
}
.err a { color:var(--red); font-weight:600; }

.send {
  position:relative; overflow:hidden; isolation:isolate;
  display:block; width:100%; margin-top:26px; font:inherit; font-size:17px; font-weight:600;
  color:#fff; border:0; border-radius:14px; padding:16px;
  background:linear-gradient(94deg,#7B2FF7,#F107A3,#7B2FF7); background-size:220% 100%;
  background-position:0 0;
  cursor:pointer; box-shadow:0 8px 22px rgba(123,47,247,.28);
  transition:transform .2s var(--out), box-shadow .2s, opacity .2s,
             background-position .7s var(--out);
}
.send:hover { transform:translateY(-2px); background-position:100% 0;
              box-shadow:0 12px 30px rgba(123,47,247,.34); }
.send:active { transform:translateY(0) scale(.995); }
.send[disabled] { opacity:.72; cursor:default; transform:none; }
/* While it is sending, a light runs across it — the button is the only thing on screen that
   knows something is happening, and a button that just greys out looks like one that broke.
   It moves with translate rather than by walking the gradient's own position: one is a line the
   compositor draws, the other repaints the whole button every frame. */
.send[disabled]::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  animation:run 1.1s linear infinite;
}
@keyframes run { from { translate:-100% 0; } to { translate:100% 0; } }

/* ---- done ------------------------------------------------------------------------------- */

.done {
  margin-top:26px; text-align:center; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:44px 26px; box-shadow:var(--shadow-2);
}
.tick { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 18px;
        border-radius:50%; background:var(--green-wash); color:var(--green); }
.tick svg { width:32px; height:32px; }
.done h3 { font-size:23px; }
.done p { margin-top:12px; color:var(--ink-2); font-size:15.5px; max-width:46ch;
          margin-inline:auto; }

/* ---- the progress rail ------------------------------------------------------------------ */
/* Fixed to the bottom, because the point of it is to answer "how much is left" without
   scrolling to find out. It only appears once somebody has actually started. */

.progress {
  position:fixed; inset-inline:0; bottom:0; z-index:6;
  display:flex; align-items:center; gap:12px;
  padding:11px 20px calc(11px + env(safe-area-inset-bottom));
  background:#FFFFFF; border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(21,18,31,.06);
}
.progress .track { flex:1; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.progress .track i { position:relative; display:block; height:100%; width:0; border-radius:99px;
                     background:var(--grad); overflow:hidden;
                     transition:width .45s var(--out); }
/* The bar's width is the only thing here that carries information, and it is enough. A light
   running along it forever was a repaint every frame, inside the one element that is fixed over
   everything else - the most expensive place on the page to put a loop. */
.progress span { font-family:"Changa",sans-serif; font-size:12px; font-weight:600;
                 color:var(--ink-2); white-space:nowrap; }
.progress { animation:slideup .45s var(--out); }
@keyframes slideup { from { translate:0 100%; } to { translate:0 0; } }

/* ---- talking to a person ------------------------------------------------------------------ */
/* Some teachers will not tick boxes and will want to say it out loud instead. That is a better
   answer than the form gives, not a worse one, so the way to do it is on the page rather than
   hidden behind a failed send. */

.wa {
  display:inline-flex; align-items:center; gap:9px; margin-top:22px; text-decoration:none;
  font-size:15px; font-weight:600; color:#0A7550; background:var(--green-wash);
  border:1px solid #C2EEDA; border-radius:12px; padding:12px 20px;
  transition:transform .2s var(--out);
}
.wa:hover { transform:translateY(-2px); }
.wa svg { width:20px; height:20px; }

.walink { color:var(--violet); text-decoration:none; font-weight:500; margin-top:4px; }
.walink:hover { text-decoration:underline; }

/* ---- the results screen ------------------------------------------------------------------- */
/* Same world, read rather than filled in. It is wider than the form because a bar chart needs
   the room and nobody is typing into it — but it still has to work on the phone in a car. */

.res { max-width:860px; padding-bottom:70px; }
.res h1 { font-size:clamp(24px,6vw,32px); }
.res h2 { margin-top:38px; }
.res .none { margin-top:14px; color:var(--ink-3); font-size:14px; }

.gate { margin-top:20px; background:var(--surface); border:1px solid var(--line);
        border-radius:16px; padding:20px; box-shadow:var(--shadow); max-width:420px; }
.gate input { width:100%; margin-top:12px; font:inherit; font-size:16px; color:var(--ink);
              background:var(--surface-2); border:1.5px solid transparent; border-radius:12px;
              padding:13px 15px; }
.gate input:focus { outline:none; border-color:var(--violet); background:#fff; }
.gate .send { margin-top:14px; font-size:16px; padding:13px; }

/* The five numbers worth knowing before any chart is read. */
.tiles { display:grid; gap:12px; margin-top:24px;
         grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:16px;
        padding:16px 18px; box-shadow:var(--shadow); }
.tile .k { display:block; font-size:13px; color:var(--ink-2); }
.tile b { display:block; font-family:"Changa",sans-serif; font-size:30px; font-weight:700;
          line-height:1.3; margin-top:2px;
          background:var(--grad); -webkit-background-clip:text; background-clip:text;
          color:transparent; }
.tile .x { display:block; font-size:12px; color:var(--ink-3); line-height:1.6; }

.chart { background:var(--surface); border:1px solid var(--line); border-radius:16px;
         padding:20px; margin-top:14px; box-shadow:var(--shadow); }
.chart h3 { font-size:16.5px; }
.chart .of { font-family:"Changa",sans-serif; font-size:12px; color:var(--ink-3); margin-top:3px; }
.chart .mean { margin-top:14px; font-size:13px; color:var(--violet); background:#FAF6FF;
               border-radius:10px; padding:9px 12px; line-height:1.7; }

.bars { display:grid; gap:9px; margin-top:16px; }
/* Label, bar, number — three columns on anything but the narrowest phone, where the bar drops
   under its own label rather than squeezing the words down to two per line. */
.barline { display:grid; grid-template-columns:minmax(90px,9.5em) 1fr auto; gap:10px;
           align-items:center; }
.barline .lab { font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.barline .track { height:10px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.barline .track i { display:block; height:100%; border-radius:99px; background:var(--grad); }
.barline .n { display:flex; align-items:baseline; gap:7px; font-family:"Changa",sans-serif;
              font-size:12px; white-space:nowrap; }
.barline .n b { font-weight:700; color:var(--ink); min-width:3.1em; }
.barline .n span { color:var(--ink-3); }
@media (max-width:430px) {
  .barline { grid-template-columns:1fr auto; }
  .barline .lab { grid-column:1 / -1; }
}

/* The open answers. Bigger type than the charts on purpose: this is the part to actually read. */
/* A stripe drawn as an inset shadow rather than a border-image, because border-image and
   border-radius do not coexist — one of them is always quietly ignored. */
.said { position:relative; background:var(--surface); border:1px solid var(--line);
        border-radius:16px; padding:18px 20px 18px 20px; margin-top:12px;
        box-shadow:var(--shadow), inset -3px 0 0 var(--violet); }
.said .text { font-size:15.5px; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.said .who { margin-top:10px; font-size:12.5px; color:var(--ink-3); }

.rows { display:grid; gap:10px; margin-top:16px; }
.person { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
          background:var(--surface); border:1px solid var(--line); border-radius:14px;
          padding:14px 18px; box-shadow:var(--shadow); }
.person b { font-size:15px; font-weight:600; }
.person .x { flex:1; font-size:12.5px; color:var(--ink-3); }
.wa.small { margin-top:0; font-size:13px; padding:8px 14px; }

.tools { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.ghost { font:inherit; font-size:14px; font-weight:500; color:var(--ink-2);
         background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
         padding:11px 18px; cursor:pointer; transition:border-color .16s, color .16s; }
.ghost:hover { border-color:var(--violet); color:var(--violet); }

/* ---- the ground behind the top ------------------------------------------------------------- */
/* One element, three gradients, no filter and no animation. It used to be three blurred circles
   drifting on their own forever, which meant the compositor was re-rasterising large soft shapes
   on every frame of the whole session — including the frames in which somebody was trying to tap
   an answer. A radial-gradient is soft at its own edge; the blur was buying nothing the gradient
   was not already giving, at the price of the page's responsiveness.

   It carries no meaning, nothing is laid out against it, and if it never painted nothing is lost. */

.aura {
  position:absolute; inset-block-start:0; inset-inline:0; height:min(680px,82vh);
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 44% at 88% -8%, rgba(123,47,247,.30), rgba(123,47,247,0) 70%),
    radial-gradient(46% 38% at 0% 16%, rgba(241,7,163,.20), rgba(241,7,163,0) 72%),
    radial-gradient(42% 34% at 68% 46%, rgba(91,140,255,.13), rgba(91,140,255,0) 74%);
  /* Faded out at the bottom rather than simply ending, or a box this colourful leaves a
     horizontal seam across the page at whatever height it stops. */
  -webkit-mask-image:linear-gradient(#000 46%,transparent 94%);
  mask-image:linear-gradient(#000 46%,transparent 94%);
}

/* ---- rising into view ----------------------------------------------------------------------- */
/* The hidden state is behind `.motion`, which motion.js puts on <html> before the first paint.
   No script, an old browser, or a phone asked to stop animating - and every block below is
   simply visible. Nothing on this page is ever hidden by something that might not run.

   This used to be thirty-five separate entrances, one on every heading, card, paragraph and
   question in the form. Thirty-five of the same effect is not choreography; it is a page that
   takes a beat to agree to show you anything, twenty-two times in a row while you are answering
   it. Now it is nineteen, the unit is the block a reader actually perceives - a whole group of
   questions, not each question - and it is shorter and travels less far, so it reads as the
   page settling rather than as the page arriving. */

.motion [data-rise] { opacity:0; translate:0 13px; }
.motion [data-rise].up {
  opacity:1; translate:0 0;
  transition:opacity .42s var(--out), translate .5s var(--out);
  transition-delay:calc(var(--r,0) * 55ms);
}
/* translate, not transform, so a hover lift stays free to use transform. */

/* The three numbers in «إزاي تبدأ» come in after their list, because they are a list and a list
   arriving in order is the one place a stagger is telling the truth about the content. */
.motion .steps li::before { opacity:0; scale:.55; }
.motion .steps.up li::before {
  opacity:1; scale:1;
  transition:opacity .3s var(--out), scale .38s var(--out);
}
.motion .steps.up li:nth-child(1)::before { transition-delay:.14s; }
.motion .steps.up li:nth-child(2)::before { transition-delay:.22s; }
.motion .steps.up li:nth-child(3)::before { transition-delay:.30s; }

/* A rule under the two section headings. It is a mark, not an event: it used to grow itself in
   from zero width every time a heading was reached, which is an animation whose whole content is
   "a line is about to be a line". */
.what h2, .ask h2, .see h2 { position:relative; }
.what h2::after, .ask h2::after, .see h2::after {
  content:""; display:block; height:3px; width:44px; margin-top:11px;
  border-radius:99px; background:var(--grad);
}

/* ---- the thank-you ---------------------------------------------------------------------------- */

.done:not([hidden]) { animation:land .55s var(--out); }
@keyframes land { from { opacity:0; translate:0 18px; scale:.985; }
                  to   { opacity:1; translate:0 0; scale:1; } }
.done:not([hidden]) .tick { animation:pop .55s var(--out) .1s both; }
@keyframes pop { 0% { scale:.4; opacity:0; } 60% { scale:1.12; opacity:1; } 100% { scale:1; } }
.done:not([hidden]) .tick svg path {
  stroke-dasharray:34; stroke-dashoffset:34; animation:draw .5s var(--out) .38s forwards;
}
@keyframes draw { to { stroke-dashoffset:0; } }

/* ---- the person behind it --------------------------------------------------------------------- */
/* Deliberately the loudest block on the page after the hero. The single most useful thing a
   teacher can do here is talk to somebody, and the second is fill in the form. */

.me { padding-block:0 56px !important; }
.mecard {
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,#FFFFFF 0%,#FAF6FF 58%,#FDF2FA 100%);
  border:1px solid #E7DDFA; border-radius:22px; padding:26px 24px 24px;
  box-shadow:var(--shadow-2);
}
.mecard::before {
  content:""; position:absolute; inset-block-start:-70px; inset-inline-start:-70px;
  width:220px; height:220px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(241,7,163,.14),transparent 70%);
}

.mehead { display:flex; align-items:center; gap:14px; }
.face {
  flex:none; display:grid; place-items:center; width:58px; height:58px; border-radius:18px;
  background:var(--grad); color:#fff; font-size:26px; font-weight:700; line-height:1;
  box-shadow:0 8px 20px rgba(123,47,247,.30);
}
.mewho { display:flex; flex-direction:column; }
.melabel { font-family:"Changa",sans-serif; font-size:11.5px; font-weight:600;
           color:var(--magenta); letter-spacing:.02em; }
.mename { font-size:21px; font-weight:700; line-height:1.5; }
.melat { font-size:12px; color:var(--ink-3); letter-spacing:.03em; }

.meword { margin-top:16px; font-size:15px; color:var(--ink-2); line-height:1.85; max-width:52ch; }
.meword b { font-weight:600; color:var(--ink); }

.meways { display:grid; gap:11px; margin-top:20px; }
@media (min-width:560px) { .meways { grid-template-columns:1fr 1fr; } }

.wabig, .telbig {
  display:flex; align-items:center; gap:13px; text-decoration:none; border-radius:15px;
  padding:14px 16px; transition:transform .22s var(--out), box-shadow .22s, background .22s;
}
.wabig { background:#0FA65C; color:#fff; box-shadow:0 8px 20px rgba(15,166,92,.28); }
.wabig:hover { transform:translateY(-2px); background:#0C9352;
               box-shadow:0 13px 28px rgba(15,166,92,.34); }
.telbig { background:var(--surface); color:var(--ink); border:1.5px solid #E4DCF6; }
.telbig:hover { transform:translateY(-2px); border-color:var(--violet);
                box-shadow:0 10px 24px rgba(123,47,247,.16); }

.wicon { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; }
.wabig .wicon { background:rgba(255,255,255,.20); }
.telbig .wicon { background:#F0E8FE; color:var(--violet); }
.wicon svg { width:21px; height:21px; }

.wtext { display:flex; flex-direction:column; line-height:1.45; }
.wk { font-size:12px; opacity:.85; }
.wabig .wk { color:#EAFBF2; }
.telbig .wk { color:var(--ink-3); }
.wn { font-family:"Changa",sans-serif; font-size:18px; font-weight:700; letter-spacing:.04em; }

.mefine { margin-top:16px; font-size:12.5px; color:var(--ink-3); }

footer .in b { font-weight:600; color:var(--ink-2); }
.walink { display:inline-flex; align-items:center; gap:5px; }

/* ---- when the phone has been asked to stop ---------------------------------------------------- */
/* Last in the file so it wins. Everything above is decoration; none of it is load-bearing, so
   turning all of it off has to leave a page that still reads exactly the same. */

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation:none !important; transition:none !important; scroll-behavior:auto !important;
  }
  [data-rise] { opacity:1 !important; translate:none !important; }
  .steps li::before { opacity:1 !important; scale:1 !important; }
  .done .tick svg path { stroke-dashoffset:0 !important; }
  /* The phone, already arrived. */
  .see .who, .see .figs, .see .ln, .see .last, .see .msg {
    opacity:1 !important; translate:none !important; scale:1 !important;
  }
  .see .meter i { width:88% !important; }
}