/* ===== Newsletter confirmation — scoped to .nl so it won't clash with site CSS ===== */
  .nl{
    --nl-ink:#1f2d38; --nl-ink-2:#45535e; --nl-ink-3:#5a6772;
    --nl-bg:#f8f6f1; --nl-card:#ffffff; --nl-line:#e3ded4; --nl-line-2:#ece8df;
    --nl-brand:#94622a; --nl-brand-hover:#7d5122; --nl-brand-soft:#f3e6cf;
    --nl-link:#7a4f1f; --nl-link-hover:#5c3a14;
    --nl-ok-bg:#e3efe6; --nl-ok:#1f5a33;
    --nl-info-bg:#e6eef4; --nl-info:#2c4659;
    --nl-warn-bg:#f6ead6; --nl-warn:#8a5a1c;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--nl-ink);background:var(--nl-bg);
    padding:20px 0 36px;display:flex;justify-content:center;
  }
  .nl *{box-sizing:border-box}
  .nl a{color:var(--nl-link)} .nl a:hover{color:var(--nl-link-hover)}

  .nl-card{width:100%;max-width:600px;background:var(--nl-card);border:1px solid var(--nl-line);border-radius:14px;padding:40px}
  .nl-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--nl-brand-soft);color:var(--nl-brand)}
  .nl-icon--round{width:48px;height:48px;border-radius:999px}
  .nl-icon--ok{background:var(--nl-ok-bg);color:var(--nl-ok)}
  .nl-icon--info{background:var(--nl-info-bg);color:var(--nl-info)}
  .nl-icon--warn{background:var(--nl-warn-bg);color:var(--nl-warn)}
  .nl-icon svg{width:26px;height:26px}

  .nl-eyebrow{margin:24px 0 0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nl-ink-3)}
  .nl-title{margin:6px 0 0;font-family:var(--wca-heading),Georgia,serif;font-weight:500;font-size:40px;line-height:1.1;color:var(--nl-ink)}
  .nl-icon--round + .nl-title{margin-top:18px;font-size:32px}
  .nl-lead{margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--nl-ink-2)}
  .nl-lead strong{color:var(--nl-ink)}

  .nl-benefits{margin-top:28px;padding:20px 22px;background:var(--nl-bg);border-radius:10px}
  .nl-benefits h2{margin:0;font-size:15px;font-weight:600;color:var(--nl-ink)}
  .nl-benefits ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45;color:var(--nl-ink-2)}
  .nl-benefits li{display:flex;gap:10px}
  .nl-benefits svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--nl-brand)}

  .nl-form{margin-top:28px}
  .nl-actions{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
  .nl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:8px;
    font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;
    transition:background-color .15s ease}
  .nl a.nl-btn--primary,.nl-btn--primary{background:var(--nl-brand);color:#fff}
  .nl a.nl-btn--primary:hover,.nl-btn--primary:hover{background:var(--nl-brand-hover);color:#fff}
  .nl a.nl-btn--secondary{background:#fff;border-color:#cfc8bb;color:var(--nl-ink);font-weight:500}
  .nl a.nl-btn--secondary:hover{background:var(--nl-bg);color:var(--nl-ink)}
  .nl-btn--block{width:100%;min-height:52px;font-size:17px}
  .nl-btn:focus-visible,.nl a:focus-visible{outline:3px solid var(--nl-info);outline-offset:2px}
  .nl-btn[disabled]{opacity:.75;cursor:progress}
  .nl-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:nl-spin .8s linear infinite;display:none}
  .nl-btn.is-loading .nl-spinner{display:inline-block}
  @keyframes nl-spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.nl-spinner{animation:none}}

  .nl-fine{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--nl-ink-3)}
  .nl-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--nl-ink-3)}
  .nl-sub{margin:22px 0 0;font-size:14px;font-weight:600}
  .nl-sub + .nl-actions{margin-top:10px}
  .nl-footer{margin-top:24px;padding-top:20px;border-top:1px solid var(--nl-line-2);font-size:15px;color:var(--nl-ink-2)}
  .nl-footer a{font-weight:500}

  /* Only the state set on .nl[data-state] is shown. The server sets it. */
  .nl-state{display:none}
  .nl[data-state="confirm"]      .nl-state--confirm,
  .nl[data-state="subscribed"]   .nl-state--subscribed,
  .nl[data-state="already"]      .nl-state--already,
  .nl[data-state="expired"]      .nl-state--expired,
  .nl[data-state="resubscribe"]  .nl-state--resubscribe{display:block}

  @media (max-width:520px){
    .nl{padding:24px 12px 48px}
    .nl-card{padding:28px 22px}
    .nl-title{font-size:32px}
    .nl-icon--round + .nl-title{font-size:28px}
    .nl-actions .nl-btn{width:100%}
  }

  
.nl[data-state="unsubscribe"] .nl-state--unsubscribe,.nl[data-state="unsubscribed"] .nl-state--unsubscribed{display:block}.nl-card [role="alert"]{color:#9a3026;font-size:14px;margin-top:16px}.newsletter-page:has(.nl){max-width:1000px}

.nl-cancel{border:0;background:none;padding:0;color:var(--nl-link);font:inherit;text-decoration:underline;cursor:pointer}.nl{position:relative;flex-direction:column;align-items:center}.nl #newsletter-token-message:empty{display:none}
.newsletter-page .trip-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.85rem}.nl-benefits h2{font-family:Inter,Arial,sans-serif}.nl #newsletter-token-message{max-width:600px;color:#9a3026;font-size:.9rem}

/* Compact newsletter entry and confirmation, using the standard breadcrumb inset. */
.newsletter-page.public-compact-page .trip-breadcrumb{margin-bottom:8px}
.newsletter-page #MainContent_SignupPanel>h1{font-size:2.1rem;line-height:1.15;margin:0 0 12px}
.newsletter-page .newsletter-signup{margin-top:0}
.newsletter-page .newsletter-signup h2{font-size:1.35rem;line-height:1.3;margin:0 0 6px}
.newsletter-page .newsletter-signup p{margin:0 0 12px}
.newsletter-page .newsletter-signup label{margin-bottom:8px}
.newsletter-page .newsletter-signup .newsletter-consent{margin-top:2px;margin-bottom:10px}
.newsletter-page .nl{padding:0 0 12px}
.newsletter-page .nl-card{padding:20px 24px}
.newsletter-page .nl-eyebrow{margin-top:0}
.newsletter-page .nl-title{font-size:2rem}
.newsletter-page .nl-lead{margin-top:12px;font-size:1rem}
.newsletter-page .nl-benefits{margin-top:18px;padding:16px 18px}
.newsletter-page .nl-benefits ul{margin-top:10px;gap:8px}
.newsletter-page .nl-form{margin-top:20px}
.newsletter-page .nl-footer{margin-top:18px;padding-top:16px}
@media(max-width:520px){.newsletter-page .nl{padding:0 0 10px}.newsletter-page .nl-card{padding:18px}.newsletter-page .nl-title{font-size:1.8rem}}