/* TJL digital maturity checklist: shared styles for the questionnaire and the results page.
   Typeface: Cairo (TJL), Regular and Bold, Latin and Arabic. Colours: TJL identity. */
@font-face{font-family:"Cairo";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cairo-arabic-400.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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cairo-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cairo-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cairo";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/cairo-arabic-700.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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/cairo-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/cairo-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --milk:#F2F2F3; --paper:#FFFFFF; --pine:#1F2A39; --pine-2:#263345; --pine-3:#3D4C5B;
  --ink:#1F2A39; --ink-2:#5A6472; --line:#D7DADF; --line-2:#E8EAED;
  --leaf:#3B7C46; --mint:#ADD8B4; --mint-2:#E5F1E7; --fog:#B8C0CA; --amber:#E9B44C; --amber-ink:#7A5200; --stamp:#C8372D;
  --display:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
  --body:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
  --mono:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;   /* small labels and figures: same typeface, figures aligned */
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--milk);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.rail :focus-visible{outline-color:var(--mint)}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--leaf)}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--leaf);display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:.6em;height:.6em;background:currentColor;flex:none}
.lede{font-size:1.08rem;color:var(--ink-2);max-width:44em;text-wrap:pretty}
.mono{font-family:var(--mono)}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons and fields ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--pine);background:var(--pine);color:#fff;padding:.72em 1.25em;border-radius:99px;font-weight:700;text-decoration:none;transition:background .15s,transform .15s}
.btn:hover{background:var(--pine-3)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--paper);border-color:var(--ink-2)}
.btn.mint{background:var(--mint);border-color:var(--mint);color:var(--pine)}
.btn.mint:hover{background:#9CCBA4}
.btn.small{padding:.42em .9em;font-size:.86rem}
.btn.danger{background:transparent;color:var(--stamp);border-color:#E7C3BF}
.btn.danger:hover{background:#FBEDEB}
.btn[disabled]{opacity:.5;cursor:default}
.inp{width:100%;min-width:0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.6em .75em;line-height:1.35;transition:border-color .15s,box-shadow .15s}
.inp::placeholder{color:#8C95A1}
.inp:hover{border-color:#A4ACB6}
.inp:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(59,124,70,.18)}
textarea.inp{resize:vertical;min-height:4.6em}
.field{display:flex;flex-direction:column;gap:.3em;min-width:0}
.field>span{font-size:.78rem;font-weight:400;color:var(--ink-2)}

/* ---------- option pills ---------- */
.opts{display:flex;flex-wrap:wrap;gap:.4em}
.opt{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line);border-radius:99px;padding:.46em .9em .46em .6em;font-size:.92rem;line-height:1.25;text-align:left;transition:background .12s,border-color .12s,color .12s}
.opt:hover{border-color:var(--ink-2)}
.opt .tick{width:1.05em;height:1.05em;border-radius:50%;border:1.5px solid #A4ACB6;flex:none;display:grid;place-items:center;transition:background .12s,border-color .12s}
.opt .tick::after{content:"";width:.5em;height:.26em;border-left:2px solid var(--pine);border-bottom:2px solid var(--pine);transform:translateY(-.06em) rotate(-45deg) scale(0);transition:transform .12s}
.opt[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.opt[aria-pressed="true"] .tick{background:var(--mint);border-color:var(--mint)}
.opt[aria-pressed="true"] .tick::after{transform:translateY(-.06em) rotate(-45deg) scale(1)}
.opts.multi .opt .tick{border-radius:4px}
.opts.stack{display:grid;grid-template-columns:repeat(auto-fill,minmax(19em,1fr));gap:.45em}
.opts.stack .opt{border-radius:10px;padding:.62em .85em .62em .7em}
.opts.full .opt[aria-pressed="false"]{opacity:.45}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.opts.nudge{animation:nudge .25s}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.36em .7em;border-radius:99px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;background:#fff}
.pill.ok{background:var(--mint);border-color:var(--mint);color:var(--pine)}
.pill.run{background:var(--mint-2);border-color:#CBE5CF;color:#2F6438}
.pill.warn{background:#FCF1D6;border-color:#F0D58E;color:var(--amber-ink)}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}