:root {
  --white:#fff; --soft:#f4faf3; --tint:#dcf0d6; --paper:#fbfcfb;
  --ink:#17232d; --ink-2:#33424e; --muted:#5f6d7a;
  /* The action green, not the identity green: every one of these carries
     text or is a button with white text on it. See the note at the top of
     public/site/assets/site.css. */
  --accent:#2b8217; --accent-dark:#1f6b12;
  --gold:#f4c915; --gold-deep:#8a6a00;
  --rule:#e4e9e6; --rule-strong:#d3ddd7;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Manrope','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
}
/* `hidden` wins over a class that sets `display` (.btn is inline-flex): the
   signing page hides the tabs of the ways of signing an organisation refuses. */
[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--soft);color:var(--ink);font-family:var(--ui);
     font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
.shell{max-width:940px;margin:0 auto;padding:clamp(1.25rem,4vw,2.5rem)}
header.bar{background:var(--white);border-bottom:1px solid var(--rule)}
header.bar .shell{display:flex;align-items:center;gap:.6rem;
                  padding-block:.9rem;max-width:940px}
.mark{width:1.9rem;height:1.9rem;flex:none}
.wordmark{font-family:var(--display);font-size:1.1rem;font-weight:800;
          letter-spacing:-.028em;color:var(--ink)}
.wordmark b{color:#46b92d;font-weight:inherit}
.wordmark span{display:block;font-family:var(--ui);font-size:.68rem;
               font-weight:600;letter-spacing:.02em;color:var(--muted);
               margin-top:-.15rem}
.card{background:var(--white);border:1px solid var(--rule);border-radius:16px;
      padding:clamp(1.25rem,4vw,2rem);
      box-shadow:0 1px 2px rgba(23,35,45,.05)}
/* These pages used to hold one card. They hold several now, and with no
   rule between them they read as one long slab with arbitrary rules
   through it. */
.card + .card{margin-top:1.1rem}
/* A subject or an address with no space in it wraps rather than widening the page. */
.card{overflow-wrap:break-word}
h1{font-family:var(--display);font-size:clamp(1.3rem,1rem+1.2vw,1.8rem);
   font-weight:800;letter-spacing:-.025em;margin:0 0 .3rem;line-height:1.18}
.standfirst{color:var(--muted);margin:0 0 1.25rem}
/* "Gentile {name}," above the sentence, a paragraph of its own (owner 2026-11-08). */
.greeting{color:var(--muted);margin:.6rem 0 .3rem}
p{margin:0 0 .85rem}
label{display:block;font-family:var(--ui);font-size:.82rem;font-weight:650;
      color:var(--ink);margin:1.1rem 0 .4rem}
input[type=text],input[type=email],input[type=tel],textarea{border-radius:10px;
  width:100%;padding:.7rem .85rem;font-family:var(--ui);font-size:1rem;
  border:1px solid var(--rule-strong);background:var(--white);color:var(--ink)}
/* A one-line field is a finger's height on a phone too (1.2: the delegate's phone). */
input[type=text],input[type=email],input[type=tel]{min-height:44px}
a{color:var(--accent)}
a:hover{color:var(--accent-dark)}
/* A select is drawn like the text inputs: 16px, or iOS zooms the page when it is
   focused, and 44px tall for a finger (1.2). */
select{border-radius:10px;width:100%;min-height:44px;padding:.6rem .85rem;
  font-family:var(--ui);font-size:1rem;line-height:1.3;
  border:1px solid var(--rule-strong);background:var(--white);color:var(--ink)}
/* The browser's file picker is wider than a 320px phone by default. */
input[type=file]{display:block;width:100%;max-width:100%;min-height:44px;
  font-family:var(--ui);font-size:1rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:#46b92d;
  box-shadow:0 0 0 3px rgba(70,185,45,.30)}
button:focus-visible,a:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
     padding:.78rem 1.4rem;font-family:var(--ui);font-size:.95rem;
     font-weight:600;letter-spacing:-.005em;text-decoration:none;
     border:1px solid transparent;border-radius:10px;cursor:pointer;
     background:var(--accent);color:#fff;
     transition:background 200ms,border-color 200ms,color 200ms}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn--ghost{background:var(--white);color:var(--ink);border-color:var(--rule-strong)}
.btn--ghost:hover{background:var(--paper);color:var(--accent);
                  border-color:#46b92d}
.btn[aria-pressed=true]{background:var(--soft);color:var(--accent);
                        border-color:#46b92d}
.note{background:var(--paper);border:1px solid var(--rule);
      border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
      padding:.8rem 1rem;font-size:.95rem;color:var(--ink-2);margin:0 0 1.1rem}
.bad{background:#fdf1ee;border-color:#f6cfc5;border-left-color:#c93a1f;
     color:#8c2a15}
.good{background:var(--soft);border-color:var(--tint);
      border-left-color:var(--accent);color:#1d5c11}
.micro{font-family:var(--ui);font-size:.84rem;line-height:1.5;
       color:var(--muted)}
/* A few lines the organisation wrote (`composer.branding`): plain text, its line breaks kept. */
.brand-text{white-space:pre-line}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
      font-size:.8rem;word-break:break-all;color:var(--ink-2)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
footer.colophon{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--rule);text-align:center;
                font-size:.85rem;color:var(--muted)}
@media (max-width:560px){ .btn{width:100%} .row .btn{width:100%} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms !important;
                       animation-duration:.001ms !important}
}