/* Final product additions layered on the core MUTE visual system. */
.screen { min-height: 100vh; }
.sidebar { min-height: 100vh; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font-size: 15px; letter-spacing: .08em; }
.brand-copy small { margin-top: 4px; color: var(--quiet); font: 7px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.site-footer nav button { border: 0; padding: 0; background: transparent; color: var(--muted); font-size: inherit; }
.privacy-story {
  border-block: 1px solid #182120;
  background: linear-gradient(180deg, #0b1012, #0d1414);
  padding: 105px 0;
}
.privacy-story-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 110px;
}
.privacy-orbit {
  height: 390px;
  position: relative;
  border: 1px solid #23302e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 54px;
  color: var(--mint);
  font: 11px var(--mono);
  box-shadow: inset 0 0 70px #0a0f10;
}
.privacy-orbit::before {
  content: "";
  position: absolute;
  inset: 52px;
  border: 1px dashed #2d3b38;
  border-radius: 50%;
}
.privacy-orbit span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #16221f;
  border: 1px solid #365047;
  box-shadow: 0 12px 35px #0008;
}
.privacy-orbit i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--mint), #3e6459, var(--mint));
  position: relative;
}
.privacy-orbit i::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  top: -2px;
  left: 45%;
  box-shadow: 0 0 0 5px var(--mint-dim);
}
.privacy-orbit small {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--quiet);
  letter-spacing: .1em;
  white-space: nowrap;
}
.privacy-copy h2 {
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -.04em;
  margin: 17px 0 20px;
}
.privacy-copy > p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 610px;
}
.privacy-list { margin-top: 34px; }
.privacy-list > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.privacy-list > div > span { font: 10px var(--mono); color: var(--mint); }
.privacy-list p { margin: 0; }
.privacy-list strong, .privacy-list small { display: block; }
.privacy-list strong { font-size: 13px; }
.privacy-list small { font-size: 11px; color: var(--quiet); margin-top: 5px; line-height: 1.5; }
.privacy-link { margin-top: 24px; padding: 0; border: 0; background: transparent; color: var(--mint); font: 11px var(--mono); letter-spacing: .02em; }
.privacy-link span { display: inline-block; margin-left: 8px; transition: transform .25s ease; }
.privacy-link:hover span { transform: translateX(5px); }
.final-cta { text-align: center; padding: 115px 0; }
.final-cta h2 { font-size: 48px; line-height: 1.08; letter-spacing: -.045em; margin: 20px 0 35px; }
.final-cta .button span { margin-left: 12px; }
.site-footer {
  min-height: 110px;
  border-top: 1px solid #1b2424;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr auto;
  align-items: center;
  gap: 30px;
  color: var(--quiet);
  font-size: 10px;
}
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer > span { font-family: var(--mono); font-size: 8px; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #0a0f11;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px;
  margin-bottom: 28px;
}
.auth-tabs button { border: 0; background: transparent; color: var(--quiet); padding: 9px; border-radius: 5px; font-size: 11px; }
.auth-tabs button.active { background: #1b2624; color: var(--text); box-shadow: 0 1px 2px #000; }
.auth-view { display: none; }
.auth-view.active { display: block; }
.auth-view > p { color: var(--muted); font-size: 12px; margin-bottom: 25px; }
.password-input { position: relative; }
.password-input .name-input { padding-right: 55px; }
.password-input > button { position: absolute; right: 6px; top: 6px; border: 0; background: transparent; color: var(--mint); font: 9px var(--mono); padding: 7px; }
.text-action { border: 0; background: transparent; color: var(--mint); font-size: 9px; padding: 0; }
.remember-row { display: flex; align-items: center; gap: 8px; margin: 3px 0 18px; color: var(--muted); font: 10px var(--sans); text-transform: none; letter-spacing: 0; }
.remember-row input { accent-color: var(--mint); }
.password-strength { display: flex; align-items: center; gap: 5px; margin: -5px 0 15px; }
.password-strength i { width: 26px; height: 2px; background: var(--mint); }
.password-strength i:nth-child(3) { background: #283330; }
.password-strength span { font-size: 8px; color: var(--quiet); margin-left: 4px; }
.states-screen { background: radial-gradient(circle at 50% 18%, #12221e, transparent 28%), var(--bg); }
.states-shell { padding: 70px 0 100px; }
.states-shell > .section-heading { text-align: center; max-width: 650px; margin: 0 auto 50px; }
.states-shell > .section-heading .eyebrow { justify-content: center; }
.states-shell > .section-heading h1 { font-size: 44px; letter-spacing: -.045em; margin: 18px 0 12px; }
.states-shell > .section-heading p { color: var(--muted); line-height: 1.6; }
.state-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; margin: auto; }
.state-grid article { background: #101618; border: 1px solid #202a2c; border-radius: 10px; padding: 30px; }
.state-grid article .kicker { display: block; margin-top: 25px; }
.state-grid h2 { font-size: 20px; margin: 10px 0; }
.state-grid p { color: var(--muted); font-size: 12px; line-height: 1.6; min-height: 39px; }
.state-grid .button { margin-top: 12px; font-size: 10px; padding: 9px 13px; }
.state-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; font: 18px var(--mono); }
.state-icon.expired { background: #ddaa5e18; color: #e0b36e; }
.state-icon.burned { background: #ff705f17; color: var(--red); }
.state-icon.full { background: var(--mint-dim); color: var(--mint); }
.state-icon.invalid { background: #8ca5ff16; color: #9bacdf; }

/* Account settings */
.settings-main { padding-bottom: 80px; }
.settings-header { border-bottom: 1px solid #182120; }
.settings-header .button { font-size: 10px; padding: 10px 14px; }
.settings-layout { width: min(1080px, 100%); margin: 34px auto 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.settings-nav a { padding: 11px 13px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 11px; }
.settings-nav a:hover, .settings-nav a.active { color: var(--text); background: #17201f; }
.settings-nav a.active { box-shadow: inset 2px 0 var(--mint); }
.settings-content { display: grid; gap: 16px; }
.settings-card { scroll-margin-top: 24px; background: #101618; border: 1px solid #202a2c; border-radius: 10px; padding: 26px; }
.settings-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.settings-card h2 { margin: 8px 0 5px; font-size: 19px; }
.settings-card p { margin: 0; color: var(--quiet); font-size: 11px; line-height: 1.6; }
.security-badge { flex: none; color: var(--mint); background: var(--mint-dim); border: 1px solid #2c5f50; border-radius: 20px; padding: 7px 10px; font: 8px var(--mono); }
.photo-setting { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.profile-photo { width: 78px; height: 78px; position: relative; overflow: hidden; border-radius: 50%; display: grid; place-items: center; background: #20352f; border: 1px solid #396054; color: var(--mint); font-size: 20px; }
.profile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.profile-photo img.is-visible { opacity: 1; }
.photo-setting strong { font-size: 12px; }
.photo-setting p { margin-top: 5px; }
.photo-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.photo-actions .button { display: inline-block; padding: 8px 11px; font-size: 9px; }
.danger-text { color: #e6897f; }
.settings-fields { display: grid; gap: 14px; padding-top: 18px; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.form-actions .button { min-width: 138px; font-size: 10px; }
.setting-toggle { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.setting-toggle strong, .setting-toggle small { display: block; }
.setting-toggle strong { font-size: 12px; }
.setting-toggle small { margin-top: 4px; color: var(--quiet); font-size: 10px; }
.setting-toggle input { appearance: none; width: 38px; height: 21px; flex: none; border-radius: 999px; background: #27312f; border: 1px solid #37433f; position: relative; transition: background .25s ease, border-color .25s ease; }
.setting-toggle input::after { content: ""; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; border-radius: 50%; background: #77817e; transition: transform .25s ease, background .25s ease; }
.setting-toggle input:checked { background: #255b4a; border-color: #397963; }
.setting-toggle input:checked::after { transform: translateX(17px); background: var(--mint); }
.danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 30px; border-color: #3b2928; }
.danger-zone > div:first-child { max-width: 570px; }
.danger-actions { display: flex; gap: 8px; flex: none; }
.delete-account { padding: 11px 14px; border: 1px solid #6c3733; border-radius: 7px; background: #3a201e; color: #ff978d; font-weight: 700; font-size: 10px; }

/* Privacy policy placeholder */
.policy-screen { background: radial-gradient(circle at 50% 5%, #10231e, transparent 32%), var(--bg); }
.policy-shell { min-height: calc(100vh - 174px); max-width: 820px; padding: 90px 0 110px; }
.policy-heading { text-align: center; }
.policy-heading h1 { margin: 16px 0 8px; font-size: 52px; letter-spacing: -.05em; }
.policy-heading p { color: var(--quiet); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.policy-placeholder { margin-top: 55px; min-height: 330px; border: 1px dashed #30403c; border-radius: 12px; display: grid; place-items: center; align-content: center; text-align: center; padding: 40px; background: rgba(15, 22, 23, .72); }
.policy-placeholder > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--mint-dim); color: var(--mint); font-size: 22px; }
.policy-placeholder h2 { margin: 20px 0 8px; font-size: 20px; }
.policy-placeholder p { max-width: 430px; color: var(--quiet); font-size: 12px; line-height: 1.6; }
.policy-footer { min-height: 90px; border-top: 1px solid #1b2424; display: flex; justify-content: space-between; align-items: center; color: var(--quiet); font: 8px var(--mono); }
.policy-footer button { border: 0; background: transparent; color: var(--mint); font: 9px var(--mono); }

@media (max-width: 900px) {
  .privacy-story-grid { grid-template-columns: 1fr; gap: 55px; }
  .privacy-orbit { width: min(390px, 100%); margin: auto; }
  .privacy-copy { text-align: center; }
  .privacy-copy .eyebrow { justify-content: center; }
  .privacy-copy > p { margin-inline: auto; }
  .privacy-list { text-align: left; }
  .site-footer { grid-template-columns: 1fr 1fr; padding: 35px 0; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .settings-nav a { white-space: nowrap; }
  .danger-zone { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .screen-switcher { scrollbar-width: none; scroll-snap-type: x proximity; }
  .screen-switcher::-webkit-scrollbar { display: none; }
  .screen-switcher button { scroll-snap-align: start; }
  .privacy-story { padding: 70px 0; }
  .privacy-orbit { height: auto; aspect-ratio: 1; padding-inline: 28px; }
  .privacy-orbit::before { inset: 35px; }
  .privacy-orbit span { width: 52px; height: 52px; }
  .privacy-copy h2 { font-size: 32px; }
  .final-cta { padding: 80px 0; }
  .final-cta h2 { font-size: 36px; }
  .site-footer { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 18px; }
  .state-grid { grid-template-columns: 1fr; }
  .states-shell > .section-heading h1 { font-size: 34px; }
  .state-grid p { min-height: 0; }
  .settings-main { padding-inline: 14px; }
  .settings-header { height: 92px; }
  .settings-header .button { padding: 8px 10px; }
  .settings-card { padding: 20px; }
  .two-column { grid-template-columns: 1fr; }
  .photo-setting { grid-template-columns: 1fr; text-align: center; }
  .profile-photo { margin: auto; }
  .photo-actions { justify-content: center; }
  .settings-card-heading { flex-direction: column; }
  .danger-actions { width: 100%; }
  .danger-actions > * { flex: 1; }
  .policy-shell { padding: 65px 0 80px; }
  .policy-heading h1 { font-size: 40px; }
  .policy-placeholder { min-height: 290px; padding: 28px; }
}