/* «حلّل بياناتي» — entry (free first try · sample · I have a code), «check your e-mail», «free try used», sample ribbon.
   Approved mockup exports/analyse-grades-mockup/trial (2026-10-23). */
.entry{max-width:1040px;margin:6px auto 0}
.entry h1{font-size:24px;margin:0 0 4px}
.entry .lead{color:var(--ink2);font-size:14.5px;margin:0 0 16px}
.ways{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
.way{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 20px;position:relative}
.way h2{font-size:17px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.way h2 .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;font-weight:800;flex:0 0 26px}
.way p{color:var(--ink2);font-size:13.5px;margin:0 0 12px}
.way.main{border-color:var(--accent);box-shadow:0 0 0 2px #FDE3C1 inset}
.way.main .tag{position:absolute;top:-10px;inset-inline-start:18px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 10px}
.way .fld{margin-top:10px}
.way .hint{font-size:11.5px;color:var(--ink3);margin-top:3px}
.way .err{font-size:12px;color:#9B1C1C;font-weight:700;margin-top:4px}
.way .go{margin-top:12px;width:100%;justify-content:center}
.ticks{list-style:none;margin:10px 0 0;padding:0;font-size:12.5px;color:var(--ink2)}
.ticks li{display:flex;gap:6px;margin-bottom:4px}
.ticks li:before{content:"✓";color:var(--ok);font-weight:800}
.ticks li.x:before{content:"—";color:var(--ink3)}
.way.sample{background:var(--tint);border-color:#CFE0E5}
.way.sample .file{display:flex;align-items:center;gap:10px;border:1px dashed #9CC3CE;background:#fff;border-radius:11px;padding:10px 12px;margin:0 0 10px}
.way.sample .file .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#E7F6EC;color:#166534;font-weight:800;font-size:13px;flex:0 0 38px}
.way.sample .file b{display:block;font-size:13.5px;direction:ltr;unicode-bidi:isolate;text-align:start;word-break:break-all}
.way.sample .file small{color:var(--ink3);font-size:11.5px}
.way.sample .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.way.sample .two form{display:contents}
.way.sample .two .btn{justify-content:center;width:100%}
.havecode{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 18px}
.havecode .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.havecode .flds{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.havecode .code{letter-spacing:3px;font-weight:800;text-transform:uppercase;text-align:center;width:150px}
.havecode .mail{width:220px}
.havecode .err{font-size:12px;color:#9B1C1C;font-weight:700;margin-top:6px}
.havecode .tries{margin-top:8px;border-radius:9px;background:var(--warn-soft);border:1px solid #F5D9A8;color:#8A4B00;font-size:12.5px;padding:6px 10px}
.havecode details{margin-top:8px;font-size:13px}
.havecode summary{cursor:pointer;color:var(--brand);font-weight:700}
.privacy{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:16px 0 0;font-size:12px;color:var(--ink3)}
.privacy span:before{content:"🔒 "}
.mid{max-width:560px;margin:24px auto 0;text-align:center;padding:26px 22px}
.mid .big{font-size:44px;line-height:1}
.mid h1{margin:10px 0 6px;font-size:22px}
.mid p{color:var(--ink2);margin:0 0 12px;font-size:14px}
.mid .mail{direction:ltr;unicode-bidi:isolate;font-weight:800;color:var(--brand)}
.mid .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0;text-align:start}
.mid .steps3 div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--ink2);background:#fff}
.mid .steps3 b{display:block;color:var(--brand);font-size:12.5px}
.mid .steps3 .on{border-color:var(--brand);background:var(--tint)}
.mid .small{font-size:12px;color:var(--ink3)}
.mid .small button{background:none;border:none;padding:0;color:var(--brand);text-decoration:underline;font:inherit;cursor:pointer}
.usedbox{border-radius:12px;background:var(--accent-soft);border:1px solid #F5C98A;color:#7A3E00;font-size:13.5px;padding:12px 14px;margin:0 0 14px;text-align:start}
.usedbox.grey{background:#F1F5F7;border-color:var(--line);color:var(--ink2)}
.ribbon{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#0C3E4D;color:#fff;border-radius:12px;padding:10px 14px;margin:0 0 12px}
.ribbon b{font-size:14px}
.ribbon small{display:block;color:#B9D5DD;font-size:12px}
.ribbon .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.samplecta{margin-top:14px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.samplecta b{font-size:15px}
@media (max-width:760px){
  .ways{grid-template-columns:1fr}
  .way.sample .two{grid-template-columns:1fr}
  .havecode .row{flex-direction:column;align-items:stretch}
  .havecode .flds{flex-direction:column;align-items:stretch}
  .havecode .code,.havecode .mail{width:100%}
  .mid .steps3{grid-template-columns:1fr}
  .ribbon .btn,.samplecta .btn{width:100%;justify-content:center}
}
/* «افتح بريدك»: waiting for the link on any device (2026-10-24) */
.mid .waiting{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--brand);font-weight:700;background:var(--tint);border-radius:10px;padding:8px 12px;margin:0 0 12px}
.mid .waiting .spin{width:14px;height:14px;border:2px solid #CFE0E5;border-top-color:var(--brand);border-radius:50%;flex:0 0 14px;animation:tryspin .9s linear infinite}
@keyframes tryspin{to{transform:rotate(360deg)}}
/* «اكتب الرمز»: the 6-digit code in the page, the link as the second way (mockup analyse-grades-mockup/otp, 2026-10-27) */
.mid .steps3 .now{border-color:var(--accent);box-shadow:0 0 0 2px #FDE3C1 inset}
.otp{position:relative;display:flex;gap:8px;justify-content:center;direction:ltr;margin:16px 0 6px;cursor:text}
.otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;margin:0}
.otp span{width:48px;height:58px;border:1.5px solid var(--line);border-radius:11px;background:#fff;display:grid;place-items:center;
  font:800 26px "Segoe UI",Cairo,sans-serif;color:var(--brand);font-variant-numeric:tabular-nums}
.otp span.f{border-color:var(--brand);background:var(--tint)}
.otp span.c{border-color:var(--accent);box-shadow:0 0 0 3px #FDE3C1}
.otp span.c:after{content:"";width:2px;height:28px;background:var(--brand);animation:otpblink 1s steps(1) infinite}
.otp i{width:10px}
.otp.bad span{border-color:#E25555;background:#FDECEC;color:#9B1C1C}
@keyframes otpblink{50%{opacity:0}}
.tryhint{font-size:12.5px;color:var(--ink3)!important;margin:0 0 14px!important}
.tryhint b{color:var(--brand)}
.mid .trygo{width:100%;justify-content:center}
.tryor{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12px;margin:16px 0 10px}
.tryor:before,.tryor:after{content:"";flex:1;height:1px;background:var(--line)}
.mid .waiting.linkway{justify-content:flex-start;align-items:flex-start;text-align:start;font-weight:400;border:1px dashed #9CC3CE;line-height:1.7}
.mid .waiting.linkway .spin{margin-top:4px}
.trymsg{border-radius:10px;padding:9px 12px;font-size:13px;margin:0 0 10px;text-align:start;line-height:1.7}
.trymsg.bad{background:#FDECEC;border:1px solid #F5C2C2;color:#7F1D1D}
.trymsg.warn{background:var(--accent-soft);border:1px solid #F9D59B;color:#7A3E00}
.tryfoot{margin-top:14px;line-height:1.9}
@media (max-width:760px){
  .otp{gap:5px}
  .otp span{width:42px;height:52px;font-size:22px}
  .otp i{width:4px}
}

/* the try WITHOUT an e-mail (approved mockup analyse-grades-mockup/noemail, 2026-10-28) */
.tdrop{display:block;position:relative;border:2px dashed #9CC3CE;background:var(--tint);border-radius:14px;padding:22px 16px;text-align:center;margin:6px 0 10px;cursor:pointer}
.tdrop.over{background:#E3EFF2;border-color:var(--brand)}
.tdrop input{position:absolute;opacity:0;width:1px;height:1px}
.tdrop .ic{font-size:34px;line-height:1}
.tdrop b{display:block;font-size:16px;color:var(--brand);margin:8px 0 2px}
.tdrop small{color:var(--ink3);font-size:12px}
.tdrop .btn{margin-top:12px}
.tdrop.busy{opacity:.7;pointer-events:none}
.nostep{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.nostep li{font-size:12px;border-radius:999px;padding:2px 10px;background:#ECFDF3;border:1px solid #A7E3BF;color:#14532D;font-weight:700}
.tlim{font-size:12px;color:var(--ink3);margin:10px 0 0}
.tlim b{color:var(--brand)}
.tlim.none{background:var(--accent-soft);border:1px solid #F5C98A;color:#7A3E00;border-radius:10px;padding:10px 12px;font-size:13px}
.keep{border:2px solid var(--accent);border-radius:14px;background:#fff;padding:16px 18px;margin:14px 0 0;box-shadow:0 0 0 3px #FDE3C1}
.keep h2{font-size:17px;margin:0 0 4px}
.keep p{color:var(--ink2);font-size:13.5px;margin:0 0 10px}
.keep .row{display:flex;gap:8px;flex-wrap:wrap}
.keep .row .inp{flex:1 1 240px;text-align:start}
.keep .row .btn{flex:0 0 auto}
.keep .ticks{margin-top:10px}
.keep .small{font-size:11.5px;color:var(--ink3);margin:8px 0 0}
.keep .err{font-size:12px;color:#9B1C1C;font-weight:700;margin-top:4px}
.kept{border-radius:12px;background:#ECFDF3;border:1px solid #A7E3BF;color:#14532D;padding:12px 14px;font-size:13.5px;margin-top:14px;line-height:1.8}
.kept.bad{background:#FDECEC;border-color:#F5C2C2;color:#7F1D1D}
@media (max-width:760px){.keep .row .btn{flex:1 1 100%;justify-content:center}}