/* EFG theme: "Cleanroom" (variant 4 of 5), provisional pick 2026-11-02.
   Evelyn has the final say; to try another look, replace this file only.
   Avenir Next on Apple devices, Nunito Sans elsewhere. Light only. */
/* Nunito Sans served from this site (SIL Open Font License), no third-party requests */
@font-face{font-family:"Nunito Sans";font-style:normal;font-display:swap;font-weight:200 1000;src:url("fonts/nunito-sans-latin-ext-wght-normal.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:"Nunito Sans";font-style:normal;font-display:swap;font-weight:200 1000;src:url("fonts/nunito-sans-latin-wght-normal.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{
  --paper:#f4fafb !important; --sheet:#ffffff !important; --ink:#0b2b33 !important;
  --text:#2f4a50 !important; --muted:#5f7a80 !important; --rule:#d5e8ec !important;
  --link:#167f92 !important; --sky:#00c7be !important;
  --flag:#0b6f7d !important; --flag-bg:#e3f6f7 !important;
  --display:"Avenir Next",Avenir,"Nunito Sans","Segoe UI",sans-serif !important;
  --body:"Avenir Next",Avenir,"Nunito Sans","Segoe UI",sans-serif !important;
  --mono:"Avenir Next",Avenir,"Nunito Sans","Segoe UI",sans-serif !important;
  --teal:#167f92; --mint:#00c7be; --card:#ffffffcc;
  color-scheme:light !important;
}

body{
  background:
    radial-gradient(1200px 520px at 85% -10%,#c9f1f0 0%,transparent 60%),
    radial-gradient(900px 500px at 0% 0%,#dff1f7 0%,transparent 55%),
    var(--paper) no-repeat;
  background-color:var(--paper);
  color:var(--text);
  font-family:var(--body);
  line-height:1.65;
}
.wrap{max-width:1040px}

/* draft banner: quiet mint strip */
.draft{font:600 .78rem/1.4 var(--body);letter-spacing:.02em}

/* header: wordmark with mint dot, nav as a glass pill */
header .wrap{padding-block:20px}
.mark{font:700 1.02rem/1.2 var(--display);letter-spacing:.01em;display:inline-flex;flex-direction:column;padding-left:20px;position:relative}
.mark::before{content:"";position:absolute;left:0;top:.38em;width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px #00c7be33}
.mark small{font:600 .64rem/1.4 var(--body);letter-spacing:.12em;color:var(--muted)}
header nav{gap:4px !important;padding:5px;background:var(--card);border:1px solid var(--rule);border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
header nav a.contact{text-decoration:none;color:var(--ink);font-size:.9rem;padding:6px 14px;border-radius:999px}
header nav a.contact:hover{background:#e3f6f7}
header a.lang{border:0 !important;font:600 .8rem var(--body) !important;color:var(--teal) !important}

/* headings */
h1{font:300 clamp(2.3rem,5.6vw,4rem)/1.1 var(--display) !important;letter-spacing:-.02em !important;color:var(--ink)}
h2{font-family:var(--display) !important;font-weight:600 !important;color:var(--ink)}
h3{font-family:var(--display);color:var(--ink)}

/* homepage hero centred like the mockup */
.hero{align-items:center;text-align:center;padding-block:72px 48px !important}
.hero .lede{margin-inline:auto;color:var(--muted);font-size:1.15rem}
.lede{color:var(--muted)}

/* the ten questions: two columns of soft cards */
.qhead{border-bottom:0 !important;justify-content:center !important;flex-direction:column;align-items:center !important;text-align:center;padding-bottom:4px}
.qhead h2{font-size:clamp(1.5rem,3vw,2rem) !important}
.qhead span{font:400 .95rem var(--body) !important}
ol.q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px !important}
ol.q li{background:#fff;border:1px solid var(--rule) !important;border-radius:18px;padding:20px 22px !important;box-shadow:0 6px 20px #0b2b330a;grid-template-columns:44px minmax(0,1fr) !important;align-content:start}
ol.q li::before{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e3f6f7;color:var(--teal) !important;font:700 1rem/1 var(--body) !important;grid-row:span 3}
ol.q h3{font:600 1.02rem/1.45 var(--body) !important}
ol.q .ref{font:600 .78rem/1.5 var(--body) !important;color:var(--teal) !important}
ol.q p{font-size:.93rem !important;color:var(--muted)}

/* "How we check" on home: one wide card */
.how{background:linear-gradient(180deg,#fff,#f0fafb);border:1px solid var(--rule);border-radius:22px;padding:32px !important;margin-block:48px}

/* inner pages: numbered blocks become cards */
.page{padding-block:56px 24px !important}
.back{font:600 .85rem var(--body) !important}
.blk{background:#fff;border:1px solid var(--rule) !important;border-radius:18px;padding:24px !important;margin-block:12px;box-shadow:0 6px 20px #0b2b330a}
.blk .n{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#e3f6f7;color:var(--teal) !important;font:700 .95rem/1 var(--body) !important}
.note{border-left:3px solid var(--mint) !important;background:#fff !important;border-radius:0 12px 12px 0}
.tag{font:600 .7rem var(--body) !important;color:var(--teal) !important;border-color:var(--rule) !important;border-radius:999px;padding:1px 9px !important}
.res li{border-color:var(--rule) !important}

/* tables */
table{border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
th{background:#e3f6f7;color:var(--ink)}
th,td{border-color:var(--rule) !important}

/* buttons and contact */
.mail,.mailbig{color:var(--ink) !important}
footer{border-top:0 !important;text-align:center}
footer .wrap{justify-content:center !important;flex-direction:column;align-items:center}
footer .mail{display:inline-block;background:var(--mint);color:var(--ink) !important;padding:10px 20px;border-radius:999px;font:700 .95rem var(--body) !important}

@media (max-width:760px){
  ol.q{grid-template-columns:1fr}
  .hero{text-align:left;align-items:flex-start}
  .how{padding:22px !important}
  header nav{border-radius:18px}
}