:root{
  --ink:#222823;
  --muted:#697269;
  --sage:#6f7c72;
  --sage-deep:#58665c;
  --sage-soft:#eef2ee;
  --leaf:#c4cfbf;
  --paper:#ffffff;
  --canvas:#f5f7f4;
  --line:#dfe5df;
  --danger:#944943;
  --danger-soft:#fff5f4;
  --shadow:0 24px 70px rgba(39,48,41,.10);
}
*{box-sizing:border-box}
html{background:var(--canvas)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(196,207,191,.34), transparent 26rem),
    linear-gradient(180deg,#f8faf7 0%,#f3f6f2 100%);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
button,input{font:inherit}
button{cursor:pointer}
.page-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:36px 18px 32px;
  animation:pageEnter .55s cubic-bezier(.22,.8,.28,1) both;
}
.site-header{
  width:min(100%,760px);
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}
.brand img{
  display:block;
  width:min(220px,62vw);
  height:auto;
  transition:transform .28s ease, filter .28s ease;
}
.brand:hover img{
  transform:translateY(-2px) scale(1.015);
  filter:drop-shadow(0 8px 14px rgba(53,63,56,.10));
}
.card{
  width:min(100%,760px);
  background:var(--paper);
  border:1px solid rgba(111,124,114,.16);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  animation:cardEnter .62s .06s cubic-bezier(.22,.8,.28,1) both;
}
.hero{
  padding:44px 52px 32px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.eyebrow,.kicker{
  display:inline-block;
  margin:0 0 10px;
  color:var(--sage-deep);
  font-size:12px;
  font-weight:800;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.eyebrow{
  padding:6px 11px;
  background:var(--sage-soft);
  border-radius:999px;
}
h1,h2,p{margin-top:0}
.hero h1{
  margin-bottom:12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(32px,5vw,46px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.03em;
}
.intro{
  max-width:570px;
  margin:0 auto;
  color:var(--muted);
  font-size:15.5px;
}
.identity-card{
  width:min(100%,420px);
  margin:22px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfcfb;
  text-align:left;
}
.identity-copy{
  display:grid;
  gap:1px;
  min-width:0;
}
.identity-label{
  color:#7a847c;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.identity-copy strong{
  color:#3d4740;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.identity-action{
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  padding:8px 10px;
  background:var(--sage-soft);
  color:var(--sage-deep);
  font-size:12.5px;
  font-weight:800;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.identity-action:hover{
  background:#e4ebe4;
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(51,61,54,.08);
}
.identity-action:active{transform:translateY(0) scale(.98)}
.content{padding:34px 48px 44px}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.section-heading .kicker{margin-bottom:2px}
.section-copy{margin:0;color:var(--muted);font-size:14px}
.text-button{
  border:0;
  background:transparent;
  color:var(--sage-deep);
  padding:4px;
  font-size:13px;
  font-weight:800;
  transition:color .18s ease, transform .18s ease, opacity .18s ease;
}
.text-button:hover{
  color:var(--ink);
  transform:translateY(-1px);
}
.text-button:active{transform:translateY(0) scale(.98)}
.preference-list{display:grid;gap:14px}
.preference-card{
  display:block;
  border:1px solid var(--line);
  border-radius:18px;
  padding:21px;
  background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.preference-card:hover{
  border-color:#c9d3ca;
  box-shadow:0 10px 26px rgba(40,48,42,.07);
  transform:translateY(-2px);
  background:#fdfefd;
}
.preference-copy h2{
  margin-bottom:5px;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.015em;
}
.preference-copy>p{
  margin-bottom:0;
  color:var(--muted);
  font-size:14px;
}
.check-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #edf0ed;
  color:#3d4740;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
.check-label input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.fake-check{
  width:20px;
  height:20px;
  flex:0 0 20px;
  border:1.5px solid #adb8af;
  border-radius:6px;
  background:#fff;
  display:grid;
  place-items:center;
  transition:background .18s ease,border-color .18s ease,transform .18s cubic-bezier(.22,.8,.28,1),box-shadow .18s ease;
}
.check-label input:checked + .fake-check{
  background:var(--sage);
  border-color:var(--sage);
  transform:scale(1.04);
  box-shadow:0 4px 10px rgba(88,102,92,.16);
}
.check-label input:checked + .fake-check::after{
  content:"";
  width:8px;
  height:4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-1px) rotate(-45deg);
}
.check-label input:focus-visible + .fake-check{
  outline:3px solid rgba(111,124,114,.22);
  outline-offset:2px;
}
.save-row{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:26px;
}
.button{
  border-radius:11px;
  padding:12px 18px;
  font-weight:800;
  border:1px solid transparent;
  transition:transform .18s cubic-bezier(.22,.8,.28,1),background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.985)}
.button-primary{
  background:var(--sage);
  color:#fff;
  box-shadow:0 7px 17px rgba(88,102,92,.17);
}
.button-primary:hover{background:var(--sage-deep)}
.button-secondary{
  color:#364039;
  border-color:var(--line);
  background:#fff;
}
.button-danger{
  color:#fff;
  background:var(--danger);
  border-color:var(--danger);
}
.save-help{margin:0;color:var(--muted);font-size:12.5px}
.toast{
  display:none;
  margin-top:17px;
  padding:12px 14px;
  border:1px solid #cedbce;
  border-radius:12px;
  background:#f5faf5;
  color:#405346;
  font-size:14px;
  font-weight:700;
}
.toast.show{display:flex;align-items:center;gap:9px;animation:slideIn .18s ease}
.toast-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  flex:0 0 22px;
  aspect-ratio:1 / 1;
  border-radius:50%;
  background:#dfe9df;
  line-height:1;
  animation:checkPop .34s cubic-bezier(.2,.9,.25,1.25) both;
}
@keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.unsubscribe-card{
  margin-top:34px;
  padding:22px;
  display:flex;
  align-items:flex-start;
  gap:15px;
  border:1px solid #eadad8;
  border-radius:17px;
  background:linear-gradient(180deg,#fffafa 0%,#fffdfd 100%);
}
.unsubscribe-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  position:relative;
  border-radius:50%;
  background:var(--danger);
  border:1px solid var(--danger);
  box-shadow:0 5px 12px rgba(148,73,67,.13);
}
.unsubscribe-icon::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transform:translate(-50%,-50%);
}
.unsubscribe-copy{min-width:0}
.unsubscribe-copy .kicker{margin-bottom:3px}
.unsubscribe-copy h2{margin-bottom:6px;font-size:18px}
.unsubscribe-copy>p{
  margin-bottom:14px;
  color:var(--muted);
  font-size:13.5px;
}
.danger-kicker{color:var(--danger)}
.unsubscribe-button{
  border:1px solid #dfc3c0;
  border-radius:9px;
  background:#fff;
  color:var(--danger);
  padding:9px 12px;
  font-size:13px;
  font-weight:800;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.unsubscribe-button:hover{
  background:var(--danger-soft);
  border-color:#d8b5b1;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(148,73,67,.08);
}
.unsubscribe-button:active{transform:translateY(0) scale(.985)}

.site-footer{
  width:min(100%,760px);
  text-align:center;
  color:#788178;
  font-size:12px;
  margin-top:20px;
  line-height:1.7;
}
.site-footer p{margin:0}
.footer-links{
  display:flex;
  justify-content:center;
  gap:8px;
}
.site-footer a{
  color:#5e685f;
  text-decoration:none;
  position:relative;
  transition:color .2s ease, opacity .2s ease, transform .2s ease;
}
.site-footer a:hover{
  color:var(--sage-deep);
  opacity:.78;
}
.site-footer a:focus-visible{
  outline:2px solid rgba(111,124,114,.35);
  outline-offset:3px;
  border-radius:4px;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(28,35,30,.48);
  backdrop-filter:blur(6px);
  animation:fadeIn .18s ease both;
}
.modal-backdrop[hidden]{display:none}
.modal{
  width:min(100%,500px);
  background:#fff;
  border-radius:20px;
  padding:29px;
  box-shadow:0 28px 90px rgba(25,31,27,.28);
  animation:modalEnter .28s cubic-bezier(.22,.8,.28,1) both;
}
.modal-heading-row{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:14px;
}
.modal-heading-row .kicker{
  margin-bottom:2px;
}
.modal-heading-row h2{
  margin:0;
  font-size:23px;
  letter-spacing:-.02em;
}
.modal-symbol{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--danger-soft);
  border:1px solid #f0dad7;
  color:var(--danger);
  font-weight:900;
  line-height:1;
}
.neutral-symbol{
  background:var(--sage-soft);
  border-color:#dfe7df;
  color:var(--sage-deep);
  font-size:16px;
}
.modal-body-copy{
  margin-bottom:18px;
  color:var(--muted);
  font-size:14px;
}
.modal-actions{display:flex;gap:10px;margin-top:22px}
.modal-actions .button{flex:1}
.field-label{
  display:block;
  margin-bottom:6px;
  color:#3f4942;
  font-size:13px;
  font-weight:800;
}
.text-field{
  width:100%;
  padding:12px 13px;
  border:1px solid #cfd7d0;
  border-radius:10px;
  outline:none;
  color:var(--ink);
  background:#fff;
}
.text-field:focus{
  border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(111,124,114,.14);
}
.field-help{
  margin:8px 0 0;
  color:#808981;
  font-size:12px;
}
.email-toast{margin-top:14px}

.unsubscribed-state{
  padding:58px 48px 62px;
  text-align:center;
}
.unsubscribed-state[hidden]{display:none}
.unsubscribed-state h1{
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  font-weight:500;
}
.unsubscribed-state>p:not(.kicker){
  max-width:540px;
  margin:0 auto 24px;
  color:var(--muted);
  font-size:14.5px;
}
.success-mark{
  width:58px;
  height:58px;
  flex:0 0 58px;
  aspect-ratio:1 / 1;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--sage-soft);
  color:var(--sage-deep);
  font-size:25px;
  font-weight:900;
  line-height:1;
  animation:successPop .48s cubic-bezier(.2,.9,.25,1.25) both;
}
.preview-badge{
  position:fixed;
  right:15px;
  bottom:15px;
  z-index:5;
  padding:7px 10px;
  border:1px solid rgba(111,124,114,.22);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  color:#667168;
  font-size:11px;
  font-weight:800;
  box-shadow:0 5px 18px rgba(34,41,36,.08);
}
@media (max-width:640px){
  .page-shell{padding:22px 12px 24px}
  .site-header{margin-bottom:16px}
  .brand img{width:min(190px,58vw)}
  .card{border-radius:19px}
  .hero{padding:34px 22px 26px}
  .content{padding:27px 18px 32px}
  .section-heading{align-items:flex-start}
  .preference-card{padding:18px}
  .save-row{align-items:stretch;flex-direction:column}
  .button-primary{width:100%}
  .save-help{text-align:center}
  .unsubscribe-card{padding:18px}
  .modal-actions{flex-direction:column-reverse}
  .unsubscribed-state{padding:48px 24px 52px}
  .preview-badge{position:static;margin-top:14px}
}
@media (max-width:430px){
  .identity-card{align-items:flex-start;flex-direction:column}
  .identity-action{width:100%}
  .modal-heading-row{align-items:flex-start}
}

@keyframes pageEnter{
  from{opacity:0}
  to{opacity:1}
}
@keyframes cardEnter{
  from{opacity:0;transform:translateY(14px) scale(.992)}
  to{opacity:1;transform:none}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes modalEnter{
  from{opacity:0;transform:translateY(10px) scale(.975)}
  to{opacity:1;transform:none}
}
@keyframes checkPop{
  0%{transform:scale(.72);opacity:.35}
  70%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1)}
}
@keyframes successPop{
  0%{transform:scale(.68) rotate(-8deg);opacity:0}
  70%{transform:scale(1.08) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* Production states */
[hidden]{display:none!important}
.state-panel,.verified-state{
  padding:58px 48px 62px;
  text-align:center;
}
.state-panel h1,.verified-state h1{
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,5vw,40px);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.025em;
}
.state-panel>p:not(.kicker),.verified-state>p:not(.kicker){
  max-width:560px;
  margin:0 auto 24px;
  color:var(--muted);
  font-size:14.5px;
}
.state-icon{
  width:58px;height:58px;aspect-ratio:1/1;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:24px;font-weight:900;
}
.neutral-state-icon{background:var(--sage-soft);color:var(--sage-deep)}
.loading-mark{
  width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:var(--sage-soft);
}
.loading-mark span{
  width:22px;height:22px;border-radius:50%;
  border:3px solid rgba(88,102,92,.22);border-top-color:var(--sage-deep);
  animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.inline-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.button[disabled],button[disabled]{cursor:not-allowed;opacity:.62;transform:none!important;box-shadow:none!important}
.toast-error{border-color:#ecd0cd;background:#fff7f6;color:#7f3f3b}
.error-icon{background:#f3dedd;color:#8d4640}
.modal-toast{margin-bottom:0}
.preference-card.is-selected{
  border-color:#bbc8bd;background:#fbfdfb;box-shadow:0 8px 22px rgba(56,68,59,.055)
}
@media (max-width:640px){
  .state-panel,.verified-state{padding:48px 22px 52px}
}


.preferences-confirmation{
  padding:58px 48px 62px;
  text-align:center;
  animation:cardEnter .42s cubic-bezier(.22,.8,.28,1) both;
}
.preferences-confirmation[hidden]{display:none}
.preferences-confirmation h1{
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  font-weight:500;
  letter-spacing:-.025em;
}
.confirmation-intro{
  max-width:560px;
  margin:0 auto 26px;
  color:var(--muted);
  font-size:14.5px;
}
.confirmation-summary{
  width:min(100%,520px);
  margin:0 auto 26px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fbfcfb;
  text-align:left;
}
.confirmation-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.confirmation-row:last-child{border-bottom:0}
.confirmation-row span{
  color:#404a43;
  font-weight:700;
}
.confirmation-row strong{
  flex:0 0 auto;
  min-width:42px;
  text-align:center;
  padding:4px 8px;
  border-radius:999px;
  background:var(--sage-soft);
  color:var(--sage-deep);
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.confirmation-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.confirmation-home{
  display:inline-block;
  text-decoration:none;
}
@media (max-width:640px){
  .preferences-confirmation{padding:48px 22px 52px}
  .confirmation-actions{flex-direction:column}
  .confirmation-actions .button{width:100%}
}