/* Yursible l_a9: About and feedback pages only. No other page styles affected. */
:root{color-scheme:dark;--night:#061922;--panel:#142d37;--line:#607981;--paper:#f5f7f8;--muted:#c3d0d4;--button:#234e59}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--paper);font:18px/1.43 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100dvh}
a{color:inherit;text-underline-offset:.18em}
a:focus-visible{outline:3px solid #f1da7a;outline-offset:4px}
.skip-link{position:absolute;top:-200px;left:16px;z-index:5;background:#fff;color:#122c37;padding:10px 16px;border-radius:6px}
.skip-link:focus{top:10px}
.page{width:min(calc(100% - 44px),760px);margin:0 auto;padding:40px 0 100px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.35rem,7vw,3.5rem);font-weight:500;line-height:1.1;letter-spacing:-.018em;margin:3px 0 25px}
h2{font-size:1.22rem;line-height:1.28;margin:0 0 13px;font-weight:780;letter-spacing:-.02em}
p{margin:0 0 19px;color:var(--muted)}
p:last-child{margin-bottom:0}
.panel{background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:23px 20px;margin:0 0 15px}
.panel p{font-size:1.06rem;line-height:1.43}
.button-row{display:flex;justify-content:center;margin:20px 0 0}
.feedback-button{display:inline-flex;justify-content:center;align-items:center;text-align:center;min-height:54px;padding:11px 23px;max-width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:16px;color:var(--paper);font-weight:760;font-size:1.16rem;text-decoration:none}
.feedback-button:hover{background:#26454e}
.feedback-button.arrow:after{content:" ›";font-size:1.23em;margin-left:.25em}
.feedback-topbar{display:flex;align-items:center;justify-content:space-between;margin:3px 0 15px}
.feedback-back{font-size:2.45rem;font-weight:500;line-height:1;text-decoration:none;padding:3px 13px 9px;margin-left:11px}
.feedback-home{display:inline-flex;min-height:48px;padding:9px 22px;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:18px;background:var(--panel);font-weight:730;font-size:1.12rem;text-decoration:none}
.feedback-box{padding:33px 16px 18px}
.mail-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;text-align:center;padding:10px 13px;background:var(--button);border:1.5px solid var(--line);border-radius:14px;font-size:1.19rem;line-height:1.3;font-weight:780;text-decoration:none}
.mail-button:hover{background:#2b6271}
.safety-copy{margin-top:15px;font-size:1rem;line-height:1.46}
@media(max-width:430px){.page{padding-top:30px}.panel{padding:18px 15px}.panel p{font-size:1.03rem}.feedback-box{padding:33px 14px 14px}.feedback-home{padding:8px 19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* l_a10: About page alone follows Yursible's existing light/green theme.
   The shared feedback page and its dark design remain unchanged. */
body.about-page {
  color-scheme: light;
  --night: #f7f9f8;
  --panel: #ffffff;
  --line: #bfd1c7;
  --paper: #20302b;
  --muted: #4c6257;
  --button: #174d3d;
}
.about-page h1 { color: #20302b; }
.about-page h2 { color: #174d3d; }
.about-page .panel { border-color: #bfd1c7; }
.about-page .feedback-button {
  background: #174d3d;
  border-color: #174d3d;
  color: #ffffff;
}
.about-page .feedback-button:hover { background: #145d48; }
.about-topbar { display: flex; justify-content: flex-start; margin: -7px 0 14px; }
.about-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 52px;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 650;
  color: #174d3d;
  text-decoration: none;
  border-radius: 9px;
}
.about-back:hover { background: #edf5f0; }

/* Feedback presentation: match the existing Yursible About colors. */
body.feedback-page {
  color-scheme: light;
  --night: #f7f9f8;
  --panel: #ffffff;
  --line: #bfd1c7;
  --paper: #20302b;
  --muted: #4c6257;
  --button: #174d3d;
}
.feedback-page h1 { color: #20302b; }
.feedback-page .feedback-home { color:#174d3d; background:#fff; border-color:#bfd1c7; }
.feedback-page .feedback-back { color:#174d3d; }
.feedback-page .mail-button {
  color:#fff;
  background:#174d3d;
  border-color:#174d3d;
}
.feedback-page .mail-button:hover { background:#145d48; }

/* Feedback pop-up from the About page; doesn't alter the About button. */
.feedback-dialog {
  box-sizing:border-box;
  width:min(calc(100% - 28px), 700px);
  max-height:calc(100dvh - 28px);
  max-height:calc(100svh - 28px);
  margin:auto;
  padding:0;
  overflow:auto;
  color-scheme:light;
  background:#f7f9f8;
  color:#20302b;
  border:2px solid #bfd1c7;
  border-radius:21px;
  box-shadow:0 18px 60px rgba(1,27,20,.28);
  font:18px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.feedback-dialog::backdrop { background:rgba(4,26,21,.68); }
.feedback-dialog * { box-sizing:border-box; }
.feedback-dialog-inner { padding:20px 18px 23px; }
.feedback-dialog-heading { display:flex;align-items:center;gap:12px;margin-bottom:18px; }
.feedback-dialog-back { flex:none; width:52px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#174d3d;border:1.5px solid #bfd1c7;border-radius:14px;
  font:700 2rem/1 system-ui,-apple-system,sans-serif;cursor:pointer;touch-action:manipulation; }
.feedback-dialog h2 { margin:0;color:#20302b;font:500 clamp(2rem,6.8vw,3.4rem)/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.018em; }
.feedback-dialog-card { background:#fff;border:1.5px solid #bfd1c7;border-radius:16px;padding:22px 18px; }
.feedback-dialog-mail { display:flex;align-items:center;justify-content:center;min-height:62px;width:100%;text-align:center;
  padding:12px 14px;border-radius:14px;background:#174d3d;border:1.5px solid #174d3d;color:#fff;
  font-weight:750;font-size:1.14rem;line-height:1.3;text-decoration:none; }
.feedback-dialog-mail:hover { background:#145d48; }
.feedback-dialog p { color:#4c6257;font-size:1.02rem;line-height:1.5;margin:18px 0 0; }
.feedback-dialog :is(a,button):focus-visible { outline:3px solid #b65c00;outline-offset:3px; }
@media(max-width:430px){
  .feedback-dialog-inner{padding:16px 13px 18px}
  .feedback-dialog-heading{margin-bottom:14px}
  .feedback-dialog-card{padding:18px 14px}
  .feedback-dialog p{font-size:1rem}
}