/* V40 — field notes subscription.
   Every value below is measured from the site's existing form on /contact/, not invented.
   The contact page's own tokens (--line-strong, --cyan-text) live in a stylesheet that page
   alone loads, so the literals are repeated here with their source noted. */

.sub40{margin-top:2.5rem;padding-top:2rem;border-top:1px solid #e3e5ee;max-width:595px}
.sub40__card{background:var(--white);border:1px solid #c9cfe2;border-radius:14px;
  padding:2.5rem 2.75rem 2.25rem;max-width:640px}
@media(max-width:600px){.sub40__card{padding:1.75rem 1.5rem 1.5rem}}

.sub40__title{font-family:var(--font-display);font-size:2rem;font-weight:600;line-height:1.1;
  color:var(--charcoal);margin:0 0 .5rem;text-wrap:balance}
.sub40__sub{font-size:1.0625rem;line-height:1.6;color:var(--slate);margin:0 0 1.75rem}

.sub40__form{display:flex;flex-direction:column;gap:1.375rem}
.sub40 .hp40{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sub40__grid{display:grid;gap:1.125rem}
@media(min-width:560px){.sub40__grid{grid-template-columns:1fr 1fr}}
.sub40__field{min-width:0}

.sub40__lbl{display:block;font-family:var(--font-body);font-size:.9375rem;font-weight:500;
  color:var(--charcoal);margin-bottom:.5rem}
.sub40__opt{font-weight:400;color:var(--label)}

.sub40 input[type=text],.sub40 input[type=email]{
  font:inherit;font-size:1.0625rem;color:var(--charcoal);background:#f7f8fc;
  border:1px solid #7c86a3;border-radius:8px;padding:.75rem .875rem;min-height:48px;
  width:100%;min-width:0;
  transition:border-color .18s ease,box-shadow .18s ease}
.sub40 input::placeholder{color:#8a92ad}
.sub40 input[type=text]:hover,.sub40 input[type=email]:hover{border-color:var(--mid)}
.sub40 input[type=text]:focus,.sub40 input[type=email]:focus{border-color:var(--action);outline:none;
  box-shadow:0 0 0 3px #0a3a8c1f}
.sub40 input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sub40 input[aria-invalid=true]{border-color:var(--error)}

.sub40__fs{border:0;padding:0;margin:0;min-width:0}
.sub40__legend{padding:0;font-family:var(--font-body);font-size:.9375rem;font-weight:500;
  color:var(--charcoal);margin-bottom:.5rem}
.sub40__chips{display:flex;flex-wrap:wrap;gap:.5rem}

/* the /contact/ chip, to the letter: 40px pill (44px per v21.css), 8px dot, charcoal when chosen */
.sub40__chip{position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 .875rem 0 .75rem;border-radius:999px;border:1px solid #7c86a3;background:var(--white);
  font-size:.875rem;font-weight:500;color:var(--charcoal);cursor:pointer;
  transition:transform .16s var(--ease-out),background-color .18s ease,border-color .18s ease,
    color .18s ease,box-shadow .18s ease}
.sub40__chip input{position:absolute;opacity:0;width:1px;height:1px}
.sub40__chip:before{content:"";width:8px;height:8px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1.5px var(--silver);transition:background-color .18s ease,box-shadow .18s ease}
.sub40__chip:active{transform:scale(.96)}
.sub40__chip:hover{border-color:var(--mid)}
.sub40__chip:has(input:checked){background:var(--charcoal);border-color:var(--charcoal);color:var(--white);
  box-shadow:0 6px 18px -10px #1e244099}
.sub40__chip:has(input:checked):before{background:#22d3ee;box-shadow:none}
.sub40__chip:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}

.sub40__consent{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;cursor:pointer}
.sub40__consent input{width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--action);flex:none;cursor:pointer}
.sub40__consent span{font-size:.875rem;line-height:1.6;color:var(--slate)}
.sub40__consent a{color:var(--action);text-decoration:underline;text-underline-offset:.2em}
.sub40__consent input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.sub40__err{font-size:.8125rem;color:var(--error-text);margin:.375rem 0 0}
.sub40__err:empty{display:none}

.sub40__send{appearance:none;border:0;width:100%;background:var(--action);color:var(--white);
  border-radius:8px;font:500 1.125rem/1 var(--font-body);min-height:56px;cursor:pointer;
  transition:background-color .18s ease}
.sub40__send:hover{background:var(--action-hover)}
.sub40__send:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.sub40__send[disabled]{opacity:.6;cursor:default}
.sub40__note{font-size:.8125rem;color:var(--label);margin:.75rem 0 0;text-align:center;line-height:1.6}
.sub40__note a{color:var(--action);text-decoration:underline;text-underline-offset:.2em}
.sub40__status{font-size:.875rem;color:var(--slate);margin:.75rem 0 0;text-align:center}
.sub40__status:empty{display:none}
.sub40__status[data-tone=error]{color:var(--error-text)}

.sub40__done h3{font-family:var(--font-display);font-size:2rem;font-weight:600;line-height:1.1;
  color:var(--charcoal);margin:0 0 .75rem}
.sub40__done p{font-size:1.0625rem;line-height:1.6;color:var(--slate);margin:0 0 .5rem}
.sub40__done p:last-child{margin-bottom:0}
.sub40__done .sub40__fine{font-size:.875rem}
.sub40.is-done .sub40__form,.sub40.is-done .sub40__title,.sub40.is-done .sub40__sub{display:none}
.sub40__done{display:none}
.sub40.is-done .sub40__done{display:block}

/* Confirmation, welcome and expiry pages. The site resets paragraph margins to 0 and scopes
   .btn to its Astro component, so these carry their own spacing and their own button. */
.note40{max-width:595px}
.note40 p{font-size:1.0625rem;line-height:1.6;color:var(--slate);margin:0 0 1.15em}
.note40 p:last-child{margin-bottom:0}
.note40 a{color:var(--action);text-decoration:underline;text-underline-offset:.2em}
.note40 a:hover{color:var(--action-hover)}
.note40 .note40__fine{font-size:.875rem;color:var(--label)}

.note40 .note40__cta{display:inline-flex;align-items:center;margin-top:1.5rem;
  background:var(--action);color:var(--white);border-radius:8px;padding:.75rem 1.5rem;min-height:44px;
  font-size:1.0625rem;font-weight:500;text-decoration:none;transition:background-color .18s ease}
.note40 .note40__cta:hover{background:var(--action-hover);color:var(--white)}
.note40 .note40__cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.note40__next{border-top:1px solid #e3e5ee;margin-top:2.5rem;padding-top:1.5rem}
.note40__k{font-size:.9375rem;font-weight:500;color:var(--charcoal);margin:0 0 1rem}
.note40__next ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.note40__next li{margin:0}
.note40 .note40__next a{font-size:1.0625rem;color:var(--charcoal);text-decoration:none;font-weight:500;
  border-bottom:1px solid #c9cfe2;padding-bottom:.15rem;
  transition:border-color .18s ease,color .18s ease}
.note40 .note40__next a:hover{color:var(--action);border-color:var(--action)}
.note40 .note40__next a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .sub40 input,.sub40 button,.sub40__chip,.note40 a{transition:none}
  .sub40__chip:active{transform:none}
}