:root{
  --ink:#0E0E10;--ink-soft:#1A1A1D;--ink-mute:#6B6B70;--ink-faint:#A8A6A1;
  --paper:#F5F2EC;--paper-bright:#FFFFFF;--rule:#E6E2D8;--rule-bright:#ECE9E1;
  --accent:#0046FF;--accent-soft:rgba(0,70,255,.10);--accent-deep:#0034BF;--ok:#2E7D5B;--warn:#D49826;
  --font-body:'Space Grotesk','Cairo','Helvetica Neue',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r-2:8px;--r-3:14px;--r-4:20px;
  --shadow-2:0 8px 24px -8px rgba(14,14,16,.18),0 0 0 1px rgba(14,14,16,.04);
  --ans:#FFF7E0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font-body)}
a{color:var(--accent-deep)}
main{max-width:860px;margin:0 auto;padding:0 16px 32px}
.top{max-width:860px;margin:0 auto;padding:20px 16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:500;letter-spacing:-.01em}
.brand b{font-weight:800}
.brand__mk{width:26px;height:26px;background:var(--ink);-webkit-mask:url(gova-mark.svg) no-repeat center/contain;mask:url(gova-mark.svg) no-repeat center/contain}
.card{background:var(--paper-bright);border-radius:var(--r-4);box-shadow:var(--shadow-2);padding:40px 48px}
@media (max-width:640px){.card{padding:24px 18px;border-radius:var(--r-3)}}
.eyebrow{font:500 11px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);margin:0 0 12px}
h1{font-weight:800;font-size:clamp(26px,4.4vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0 0 16px}
h2{font-weight:700;font-size:22px;letter-spacing:-.015em;margin:44px 0 10px;padding-top:24px;border-top:1px solid var(--rule)}
h3{font-weight:700;font-size:17px;margin:26px 0 6px}
p,li{max-width:70ch}
ul,ol{padding-inline-start:22px}
li{margin:4px 0}
.lead{font-size:18px;color:var(--ink-soft)}
.mute{color:var(--ink-faint)}
.mono{font-family:var(--font-mono);font-size:12px}
.tablewrap{overflow-x:auto;margin:14px 0}
table.grid{border-collapse:collapse;width:100%;font-size:15px}
table.grid th,table.grid td{text-align:start;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--rule)}
table.grid th{font:500 11px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute);background:var(--paper)}
table.grid tr.total td{font-weight:700}
.howto{background:var(--accent-soft);border-radius:var(--r-3);padding:16px 20px;margin:20px 0}
.howto p{margin:0}
.callout{border-inline-start:3px solid var(--accent);padding:4px 0 4px 16px;margin:16px 0}
[lang=ar],.ar{font-family:'Cairo',sans-serif;font-size:1.08em}
/* answer fields */
textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--ans);border:1px solid #EBD9A6;border-radius:var(--r-2);padding:8px 10px;resize:vertical;min-height:44px}
textarea:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px;background:#fff}
table.answers td:nth-child(4){min-width:240px;background:var(--ans)}
table.answers td:first-child{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute)}
@media (max-width:700px){
  table.answers thead{display:none}
  table.answers,table.answers tbody,table.answers tr,table.answers td{display:block;width:100%}
  table.answers tr{border:1px solid var(--rule);border-radius:var(--r-3);padding:6px 4px;margin:0 0 12px}
  table.answers td{border:0;padding:6px 10px}
  table.answers td:nth-child(2){font-weight:700}
  table.answers td:nth-child(3)::before{content:"Our suggestion: ";color:var(--ink-mute)}
  table.answers td:nth-child(4){background:none;min-width:0}
}
.cbox{margin:14px 0 4px}
.cbox summary{cursor:pointer;color:var(--accent-deep);font-weight:500;font-size:15px}
.cbox textarea{margin-top:8px}
/* save bar */
.savebar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--paper-bright);border-top:1px solid var(--rule);margin:36px -48px -40px;padding:16px 48px;border-radius:0 0 var(--r-4) var(--r-4)}
@media (max-width:640px){.savebar{margin:28px -18px -24px;padding:12px 18px}}
.savebar__name{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink-mute)}
.savebar__name input{font:inherit;color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-2);padding:8px 10px;width:180px}
.savebar button{font:700 15px/1 var(--font-body);color:#fff;background:var(--ink);border:0;border-radius:999px;padding:13px 22px;cursor:pointer}
.savebar button:hover{background:var(--ink-soft)}
.savebar__state{font-size:13px;color:var(--ink-mute)}
.savebar.dirty .savebar__state{color:var(--warn);font-weight:500}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.notice{border-radius:var(--r-2);padding:12px 16px;background:var(--paper);margin:0 0 18px}
.notice--ok{background:#E3F1EA;color:var(--ok);font-weight:500}
.notice--bad{background:#FBEBEB;color:#9B2C2C}
.hist{font-size:14px}
/* footer + animated credit badge */
.foot{text-align:center;padding:24px 16px 40px;color:var(--ink-mute);font-size:13px}
.foot p{margin:12px auto 0}
.gv-credit-anim{--gv-ink:#0E0E10;--gv-paper:#FFFFFF;--gv-mute:#6B6B70;--gv-rule:#E6E2D8;--gv-accent:#0046FF;
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px 12px 14px;background:var(--gv-paper);color:var(--gv-ink);
  border:1px solid var(--gv-rule);border-radius:999px;font-family:var(--font-body);box-shadow:0 2px 14px -6px rgba(14,14,16,.18);text-decoration:none;line-height:1}
.gv-credit-anim:focus-visible{outline:2px solid var(--gv-accent);outline-offset:3px}
.gv-mk-anim{width:28px;height:28px;border-radius:8px;background:var(--gv-ink);color:var(--gv-paper);display:grid;place-items:center;position:relative;flex-shrink:0;overflow:hidden}
.gv-mk-anim::after{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0deg,var(--gv-accent) 70deg,transparent 140deg);animation:gv-spin 3.6s linear infinite}
.gv-mk-anim::before{content:"";position:absolute;inset:2px;background:var(--gv-ink);border-radius:6px;z-index:1}
.gv-glyph{position:relative;z-index:2;width:70%;height:70%;background:currentColor;-webkit-mask:url(gova-mark.svg) no-repeat center/contain;mask:url(gova-mark.svg) no-repeat center/contain;display:block;transition:transform .4s cubic-bezier(.7,0,.3,1)}
.gv-credit-anim:hover .gv-glyph{transform:rotate(360deg)}
.gv-stack{display:flex;flex-direction:column;align-items:center;line-height:1;gap:3px;min-width:88px}
.gv-by{font:500 9px/1 var(--font-mono);color:var(--gv-mute);text-transform:uppercase;letter-spacing:.14em;display:flex;align-items:center;gap:4px}
.gv-dot{width:5px;height:5px;border-radius:50%;background:var(--gv-accent);color:var(--gv-accent);animation:gv-pulse 1.6s ease-in-out infinite}
.gv-nm{font-weight:800;font-size:14px;letter-spacing:-.02em;text-align:center}
@keyframes gv-spin{to{transform:rotate(360deg)}}
@keyframes gv-pulse{0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}50%{box-shadow:0 0 0 4px transparent;opacity:.4}}
@media (prefers-reduced-motion:reduce){.gv-mk-anim::after,.gv-dot{animation:none!important}.gv-credit-anim:hover .gv-glyph{transform:none}}
@media print{.savebar,.foot,.top,.cbox:not([open]){display:none}.card{box-shadow:none;padding:0}body{background:#fff}}
@media (max-width:640px){.savebar{gap:8px}.savebar__name{font-size:13px}.savebar__name input{width:130px;padding:7px 9px}.savebar button{padding:11px 18px}.savebar__state{width:100%}}