/* Shared visual identity for Musical Sketch information pages.
   Typography, manuscript-paper texture, navy outlines and soft surfaces
   intentionally mirror the homepage and account screens. */
:root{
  color-scheme:light;
  --info-ink:#243348;
  --info-muted:#65768c;
  --info-line:#dce5ef;
  --info-accent:#263e5b;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.info-page{
  margin:0;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  color:var(--info-ink);
  background:
    radial-gradient(ellipse 80% 390px at 50% -130px,rgba(215,226,244,.72),transparent 73%),
    #fbfcfe;
  font:400 15px/1.75 "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.info-header{
  width:100%;position:relative;z-index:2;
  border-bottom:1px solid rgba(218,228,239,.75);
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.info-header-inner{
  width:min(1120px,calc(100% - 48px));min-height:79px;margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.info-wordmark{
  font:700 clamp(28px,3.1vw,38px)/1 "Caveat","Segoe Print",cursive;
  letter-spacing:-.04em;color:#202b3b;white-space:nowrap;text-decoration:none
}
.info-wordmark:hover{color:#405878}
.info-back{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:41px;padding:10px 17px;border-radius:999px;
  border:1px solid #c9d5e4;background:#fff;color:#374a63;
  text-decoration:none;white-space:nowrap;
  font:700 12px/1.2 "DM Sans",system-ui,sans-serif;
  box-shadow:0 2px 9px rgba(32,50,72,.03);
  transition:background .18s,border-color .18s,transform .18s
}
.info-back:hover{background:#f4f8fd;border-color:#95aecb;transform:translateY(-1px)}
.info-page a:focus-visible,.contact-launch:focus-visible{
  outline:3px solid #90add3;outline-offset:4px
}
.info-main{width:min(860px,calc(100% - 36px));margin:0 auto;flex:1;padding-bottom:74px}
.info-hero{
  position:relative;isolation:isolate;overflow:hidden;
  text-align:center;
  padding:clamp(48px,7.5vw,77px) 16px 42px;
}
/* About has a title-only hero: keep the next section close to its heading. */
#aboutInfo .info-hero{padding:clamp(30px,5vw,52px) 16px clamp(22px,3vw,30px)}
#aboutInfo .info-hero h1{margin:0}
#aboutInfo .info-card-grid{margin-top:0}
/* Privacy starts with its heading alone, mirroring the About page. */
#privacyInfo .info-hero{padding:clamp(30px,5vw,52px) 16px clamp(22px,3vw,30px)}
#privacyInfo .info-hero h1{margin:0}
/* Contact mirrors the heading-only About and Privacy pages.
   Keep the private feedback launcher centred, without an empty content gap. */
#contactInfo .info-hero{padding:clamp(30px,5vw,52px) 16px clamp(22px,3vw,30px)}
#contactInfo .info-hero h1{margin:0}
#contactInfo .info-contact-panel{padding-block:clamp(24px,4vw,36px)}
#contactInfo #contactFormSlot{margin:0}

.info-hero::before{
  content:"";position:absolute;z-index:-2;
  top:12%;left:0;right:0;height:118px;
  background:repeating-linear-gradient(to bottom,transparent 0 16px,
    rgba(121,142,167,.12) 16px 17px,transparent 17px 30px);
  opacity:.7;pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);
}
.info-hero::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 49%,rgba(251,252,254,.98) 0%,
   rgba(251,252,254,.93) 39%,rgba(251,252,254,.40) 76%,transparent 100%);
}
.info-eyebrow{
  color:#73859c;margin:0 0 4px;font-size:10px;font-weight:800;
  letter-spacing:.20em;text-transform:uppercase
}
.info-hero h1{
  margin:0 0 5px;font:700 clamp(59px,10vw,91px)/1.05 "Caveat","Segoe Print",cursive;
  letter-spacing:-.038em;color:#202e42;
}
.info-hero .info-lead{
  margin:16px auto 0;max-width:660px;
  color:#5f7085;font-size:clamp(14px,1.6vw,16px);line-height:1.8
}
.info-updated{
  margin:12px 0 0;color:#8492a3;font-size:11px;font-weight:650;
  letter-spacing:.035em
}
.info-panel{
  background:rgba(255,255,255,.96);
  border:1px solid var(--info-line);border-radius:24px;
  box-shadow:0 12px 40px rgba(41,58,80,.037),0 2px 8px rgba(41,58,80,.025);
  padding:clamp(27px,5.8vw,54px);
}
.info-panel p{margin:0 0 17px;color:#47576c}
.info-panel p:last-child{margin-bottom:0}
.info-panel p strong{color:#263a51;font-weight:750}
.info-panel a{color:#35608e;text-decoration:underline;text-decoration-color:#becfe3;text-underline-offset:3px}
.info-panel a:hover{color:#1b426f;text-decoration-color:currentColor}
.info-panel h2{
  margin:0 0 14px;
  font:500 clamp(20px,2.7vw,24px)/1.35 "Fredoka","DM Sans",system-ui,sans-serif;
  letter-spacing:-.015em;color:#27394f;
}
.info-panel h2+p{margin-top:0}
.info-section+.info-section{
  border-top:1px solid #e8edf4;margin-top:28px;padding-top:29px;
}
.info-section:target{scroll-margin-top:30px}
.info-pill{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:999px;background:#eef3f9;color:#556e8e;
  border:1px solid #dae4f1;padding:5px 12px;
  font:700 11px/1.3 "DM Sans",system-ui,sans-serif
}
.info-actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-top:24px!important}
.info-primary,.info-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:11px 20px;border-radius:12px;
  font:700 13px/1.3 "DM Sans",system-ui,sans-serif;
  text-decoration:none!important;transition:background .17s,border-color .17s,transform .17s
}
.info-panel .info-primary{background:#253d5a;border:1px solid #253d5a;color:#fff}
.info-panel .info-primary:hover{background:#344f71;color:#fff;transform:translateY(-1px)}
.info-panel .info-secondary{background:#fff;border:1px solid #cbd9e9;color:#354d6b}
.info-panel .info-secondary:hover{background:#f1f6fb;border-color:#a9bed6}
.info-caption{font-size:12px!important;color:#7b8a9d!important;line-height:1.65}
.info-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:26px 0 0}
.info-feature{
  padding:23px 23px 21px;border:1px solid #e0e7f0;
  border-radius:17px;background:#f9fbfe;
}
.info-feature .info-feature-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:10px;
  background:#eaf1f9;color:#375879;font:700 14px "DM Sans",sans-serif;
  margin-bottom:13px
}
.info-feature h2{font-size:21px;margin-bottom:9px}
.info-feature p{margin:0;font-size:14px;line-height:1.7}
.info-credits{
  margin-top:24px;padding:24px;border-radius:16px;border:1px solid #e1e8f1;
  background:#f7f9fc
}
.info-credits h2{margin:0 0 10px;font-size:20px}
.info-credits p{font-size:14px}
.info-contact-panel{text-align:center;max-width:100%}
.info-contact-panel h2{margin:0 0 12px;font-size:24px}
.info-contact-panel p{max-width:590px;margin:0 auto 14px}
#contactFormSlot{display:flex;justify-content:center;margin:26px 0 17px}
.info-contact-panel .info-caption{max-width:440px}
.info-contact-note{margin-top:19px}
.info-footer{
  background:rgba(255,255,255,.88);border-top:1px solid #e0e8f2;
  padding:19px 20px;text-align:center
}
.info-footer nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(14px,4vw,29px)}
.info-footer a{
  font:700 12px "DM Sans",sans-serif;text-decoration:none;color:#64748a;
  transition:color .2s
}
.info-footer a:hover,.info-footer a[aria-current="page"]{color:#253b56}
.info-footer a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
/* Keep the contact popup in the same visual language without changing
   feedback dialogs on the homepage or in the notation editor. */
.info-page #cadenceFeedbackLaunch.contact-launch{
  background:#253d5a;border:1px solid #253d5a;border-radius:12px;
  padding:13px 22px;min-height:46px;
  font:700 13px/1.3 "DM Sans",system-ui,sans-serif;
  box-shadow:0 4px 13px rgba(35,57,83,.10)
}
.info-page #cadenceFeedbackLaunch.contact-launch:hover{background:#344f71}
.info-page #cadenceFeedbackDialog{
  border:1px solid #dce5ef;border-radius:20px;
  font-family:"DM Sans",system-ui,sans-serif;
  box-shadow:0 18px 70px rgba(30,47,67,.15)
}
.info-page #cadenceFeedbackDialog h2{
  font:500 24px/1.3 "Fredoka","DM Sans",system-ui,sans-serif;
  color:#283a50
}
.info-page #cadenceFeedbackDialog .feedback-content{gap:16px}
.info-page #cadenceFeedbackDialog .feedback-actions button{
  font-family:"DM Sans",system-ui,sans-serif;border-radius:10px
}
.info-page #cadenceFeedbackDialog .feedback-actions .primary{
  border-color:#253d5a;background:#253d5a
}
.info-page #cadenceFeedbackDialog input[type="email"],
.info-page #cadenceFeedbackDialog select,
.info-page #cadenceFeedbackDialog textarea{
  border-radius:10px;font-family:"DM Sans",system-ui,sans-serif
}
@media(max-width:620px){
  .info-header-inner{width:calc(100% - 32px);min-height:66px}
  .info-wordmark{font-size:30px}
  .info-back{padding:9px 12px;min-height:39px;font-size:11px}
  .info-main{width:calc(100% - 24px);padding-bottom:38px}
  .info-hero{padding:40px 10px 30px}
  .info-hero::before{height:100px}
  .info-panel{padding:25px 23px;border-radius:18px}
  .info-panel p{font-size:14px}
  .info-section+.info-section{margin-top:23px;padding-top:24px}
  .info-card-grid{grid-template-columns:1fr;gap:12px}
  .info-feature{padding:21px}
  .info-credits{padding:20px}
}
@media(max-width:380px){
  .info-wordmark{font-size:25px}
  .info-back{padding:8px 10px}
  .info-hero h1{font-size:clamp(52px,15vw,63px)}
  .info-panel{padding:21px 18px}
  .info-actions{align-items:stretch}
  .info-primary,.info-secondary{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .info-back,.info-primary,.info-secondary{transition:none!important;transform:none!important}
}