.gi,.gi-pv{--gi-accent:var(--brand);--gi-bg:var(--paper);--gi-head:var(--ink);--gi-font:var(--display);--gi-radius:2px;--gi-field:2px;--gi-line:var(--line);--gi-ink:var(--ink);--gi-muted:var(--muted)}
/* E-mail sign-up block of the guides (gids-inschrijving, 29 Oct 2026). Colours and fonts come from the site (--gi-* set per site above). */
.gi{margin-top:3.5rem;margin-bottom:3.5rem}
.gi-card{display:grid;gap:1.1rem 2.6rem;background:var(--gi-bg,#fff);color:var(--gi-ink,inherit);border:1px solid var(--gi-line,#ddd);border-top:3px solid var(--gi-accent,#333);border-radius:var(--gi-radius,8px);padding:1.5rem 1.25rem}
@media (min-width:56em){.gi-card{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;padding:2.1rem 2.4rem}}
.gi h2,.gi h1{font-family:var(--gi-font,inherit);color:var(--gi-head,inherit);font-size:clamp(1.35rem,2.5vw,1.8rem);line-height:1.2;letter-spacing:0;text-transform:none;margin:0 0 .45rem}
.gi-text p{margin:0;color:var(--gi-muted,#555);font-size:.98rem;line-height:1.55}
.gi-form{margin:0;min-width:0}
.gi-row{display:flex;flex-wrap:wrap;gap:.6rem}
.gi input[type=email]{flex:1 1 13rem;min-width:0;min-height:2.9rem;box-sizing:border-box;font:inherit;font-size:1rem;padding:.65rem 1rem;border:1.5px solid var(--gi-line,#ccc);border-radius:var(--gi-field,6px);background:#fff;color:var(--gi-ink,#111)}
.gi input[type=email]:focus{outline:2px solid var(--gi-accent,#333);outline-offset:1px;border-color:var(--gi-accent,#333)}
.gi .btn{flex:0 0 auto;cursor:pointer}
.gi .btn[disabled]{opacity:.65;cursor:default}
.gi-consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.85rem;font-size:.86rem;line-height:1.45;color:var(--gi-muted,#555);cursor:pointer}
.gi-consent input{margin:.15rem 0 0;width:1.1rem;height:1.1rem;flex:0 0 auto;accent-color:var(--gi-accent,#333)}
.gi-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.gi-note{margin:.5rem 0 0;font-size:.8rem;color:var(--gi-muted,#666)}
.gi-msg{margin:.5rem 0 0;font-size:.92rem;min-height:1.3em}
.gi-msg:empty{min-height:0;margin:0}
.gi-msg.is-ok{color:#1e6b3a;font-weight:600}
.gi-msg.is-err{color:#a12a1a}
.gi-form.is-done .gi-row,.gi-form.is-done .gi-consent,.gi-form.is-done .gi-note{display:none}
.gi-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.gi-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gi-pv h2{scroll-margin-top:6rem}
/* confirmation page served by /api/subscribe */
.gi-page{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box}
.gi-page main{width:100%;max-width:38rem}
.gi-done{margin:0}
.gi-done .gi-card{grid-template-columns:1fr}
.gi-kicker{font-size:.75rem!important;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5rem!important}
/* pop-up (30 Oct 2026): the same block in a modal <dialog>; desktop centred, phone as a sheet from the bottom */
.gi-pop{margin:auto;padding:0;border:0;background:transparent;width:min(34rem,calc(100% - 2rem));max-width:none;max-height:calc(100dvh - 2rem);overflow:visible;color:inherit}
.gi-pop::backdrop{background:rgba(12,14,20,.55);backdrop-filter:blur(2px)}
.gi-pop[open]{animation:gi-in .28s ease-out}
.gi-pop .gi-card{position:relative;grid-template-columns:1fr!important;max-height:calc(100dvh - 2rem);overflow:auto;box-sizing:border-box;padding:2.2rem 1.6rem 1.5rem;box-shadow:0 24px 60px rgba(0,0,0,.28);border-top-width:5px}
.gi-pop h2{padding-right:2rem}
.gi-x{position:absolute;top:.55rem;right:.55rem;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:transparent;color:var(--gi-muted,#555);font-size:1.7rem;line-height:1;cursor:pointer}
.gi-x:hover,.gi-x:focus-visible{background:rgba(0,0,0,.06);color:var(--gi-ink,#111)}
.gi-no{display:block;margin:.7rem auto 0;padding:.4rem .8rem;border:0;background:none;font:inherit;font-size:.85rem;color:var(--gi-muted,#666);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:40em){
 .gi-pop{margin:auto 0 0;width:100%;max-height:92dvh}
 .gi-pop .gi-card{border-radius:var(--gi-radius,8px) var(--gi-radius,8px) 0 0;max-height:92dvh;padding:2rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom))}
 .gi-pop[open]{animation-name:gi-up}
}
@keyframes gi-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes gi-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.gi-pop[open]{animation:none}}