:root {
  font-family: system-ui, sans-serif;
  color: #1e1b17;
  background: #faf8f3;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {
  max-width: 1100px;
  margin: auto;
  padding: 36px 28px;
}
.brand {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  text-decoration: none;
  color: #1e1b17;
}
.brand span {
  color: #2c5c3e;
}
.layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
  min-height: 76vh;
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #2c5c3e;
}
h1 {
  font-family: Georgia, serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 20px 0;
}
h2 {
  font-family: Georgia, serif;
  font-size: 29px;
  margin: 24px 0 12px;
}
p {
  line-height: 1.65;
  color: #6b6055;
}
.intro > p:not(.eyebrow) {
  max-width: 420px;
}
a {
  color: #2c5c3e;
}
.preview {
  font-size: 12px;
  border-top: 1px solid #e4ddd3;
  margin-top: 40px;
  padding-top: 16px;
}
.card {
  background: #fff;
  border: 1px solid #e4ddd3;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 12px 40px #1e1b1708;
  min-width: 0;
}
nav {
  display: flex;
  border-bottom: 1px solid #e4ddd3;
  gap: 20px;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.tab {
  border: 0;
  background: transparent;
  padding: 12px 0;
  color: #6b6055;
  font-weight: 600;
}
.tab.active {
  color: #2c5c3e;
  border-bottom: 2px solid #2c5c3e;
}
.field {
  margin: 18px 0;
}
label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
input, select {
  width: 100%;
  border: 1px solid #bfb5a9;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: #1e1b17;
}
input:focus {
  outline: 2px solid #2c5c3e;
  outline-offset: 2px;
}
.reminder-panel { margin-top: 24px; padding: 20px; border: 1px solid #dce6d9; border-radius: 12px; background: #f4f7f1; }
.reminder-panel h2 { margin-top: 8px; }
.reminder-panel summary { cursor: pointer; color: #2c5c3e; font-weight: 600; }
.reminder-panel .text-button { padding: 10px 0; margin-right: 12px; }
.check-label { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; margin: 18px 0; }
.check-label input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; accent-color: #2c5c3e; }
.check-label.optional { font-weight: 400; color: #625b50; }
#reminder-collections { border: 1px solid #dce6d9; border-radius: 8px; padding: 14px; }
#reminder-collections legend { font-weight: 600; font-size: 14px; }
.primary {
  display: block;
  background: #2c5c3e;
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 13px 18px;
  width: 100%;
  font-weight: 600;
  text-align: center;
}
.link-button {
  text-decoration: none;
}
.text-button {
  border: 0;
  background: none;
  color: #2c5c3e;
  padding: 14px 0;
  text-decoration: underline;
}
.hint {
  font-size: 12px;
  margin: 6px 0;
}
.card #status {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.error {
  color: #a33e20 !important;
}
.success {
  color: #2c5c3e !important;
}
footer {
  border-top: 1px solid #e4ddd3;
  padding-top: 22px;
  font-size: 12px;
  color: #6b6055;
}
[hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  main {
    padding: 24px 20px;
  }
  .layout {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
  }
  .intro {
    padding-top: 24px;
  }
  h1 {
    margin: 12px 0;
  }
  .intro .preview {
    margin-top: 20px;
  }
  .card {
    padding: 24px;
  }
  footer {
    margin-top: 36px;
  }
}

.benefits {
  margin: 32px 0;
}
.benefits p {
  font-size: 15px;
  color: #213e2c;
}
.benefits span {
  display: inline-block;
  font:
    italic 18px Georgia,
    serif;
  color: #648669;
  width: 32px;
}
.account-details {
  border-top: 1px solid #e4ddd3;
  margin-top: 20px;
  padding-top: 20px;
  font-size: 14px;
}
.account-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #2c5c3e;
}
.account-details button {
  display: block;
}
.danger summary {
  color: #964a31;
}
.delete-button {
  background: #964a31;
  color: #fff;
  border: 0;
  padding: 13px;
  border-radius: 8px;
  margin-top: 20px;
  width: 100%;
}
#delete-form label {
  margin-top: 18px;
}
footer a {
  display: inline-block;
  margin-left: 16px;
}
.secondary { font: inherit; border: 1px solid #b6c4af; background: #fff; color: #2c5c3e; padding: 11px 16px; border-radius: 9px; font-weight: 600; min-height: 44px; }
/* Each account view handles one task; details are revealed on request. */
.signed-in main { max-width: 760px; }
.signed-in .intro { display: none; }
.signed-in .layout { display: block; min-height: 0; margin: 28px 0; }
.signed-in .card { padding: 32px; }
.account-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 20px; }
.account-heading h1 { font-size: 34px; margin: 0; }
.dashboard-return { color: #6b6055; font-size: 14px; text-decoration: none; }
#account-back { padding: 0; }
.account-shell { display: block; }
.account-content > section > h2, #reminder-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.account-navigation { display: block; border: 0; }
.account-navigation button { width: 100%; background: none; border: 0; border-bottom: 1px solid #e4ddd3; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; padding: 22px 0; color: #213e2c; }
.account-navigation button > span:first-child { display: flex; flex-direction: column; gap: 7px; }
.account-navigation strong { font-size: 17px; }
.account-navigation small { color: #6b6055; font-size: 13px; line-height: 1.5; }
.account-navigation button:hover { color: #2c5c3e; }
.account-content h3 { font-size: 14px; margin: 0 0 8px; color: #625b50; }
.account-content p { font-size: 14px; }
.profile-email { padding: 22px 0; margin: 22px 0 0; border-top: 1px solid #e4ddd3; }
.profile-email p { margin: 0; overflow-wrap: anywhere; }
#profile-form input { max-width: 460px; }
#profile-save { margin-top: 16px; }
.setting-link { display: flex; gap: 16px; justify-content: space-between; font-size: 14px; line-height: 1.6; padding: 20px 0; border-top: 1px solid #e4ddd3; text-decoration: none; }
.account-content .reminder-panel { border: 0; padding: 0; background: none; margin: 0; }
.account-content .reminder-panel > p { margin-top: 0; }
#reminder-state { padding: 14px 16px; background: #f1f4ed; border-radius: 8px; }
.account-details { margin-top: 0; padding: 20px 0; border-top: 1px solid #e4ddd3; }
.account-details summary { font-size: 14px; padding: 4px 0; min-height: 24px; }
.account-details .secondary { margin-top: 14px; }
#reminder-step-delivery { margin-top: 20px; }
#reminder-measure-label { font-weight: 400; }
#export-account { margin: 0 0 24px; }
.signed-in #status { margin: 18px 0 0; padding: 14px; border-radius: 9px; background: #f4f7f1; }
.signed-in #status:empty { display: none; }
.row-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.row-actions .primary { width: auto; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid #2c5c3e; outline-offset: 3px; }
#account-confirm-dialog { max-width: min(520px,calc(100vw - 32px)); padding: 28px; border: 1px solid #e4ddd3; border-radius: 16px; color: #1e1b17; }
#account-confirm-dialog::backdrop { background: #1d302b66; }
@media(max-width:760px) {
  .signed-in .card { padding: 24px; }
  .account-heading h1 { font-size: 30px; }
  .account-navigation button { padding: 20px 0; }
  .account-navigation strong { font-size: 16px; }
}
.privacy-page {
  max-width: 740px;
  line-height: 1.75;
}
.privacy-page h1 {
  font-size: 46px;
}
.privacy-page h2 {
  font-size: 24px;
}
.privacy-page ul {
  padding-left: 20px;
  color: #6b6055;
}
@media (max-width: 700px) {
  .benefits {
    display: none;
  }
  .intro .preview {
    margin-top: 20px;
  }
  .layout {
    gap: 28px;
  }
  footer a {
    float: none;
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }
}