/* SOUNDMiND Academy — shared styles for every /academy page.
   Palette and type come from the SMA brand board. */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  color-scheme:dark;
  --night:#0c2325;   /* page background, outlines, title shadows */
  --teal:#226a78;    /* hero fields, raised panels */
  --gold:#fec900;    /* titles, primary actions */
  --mint:#b3ffe5;    /* secondary accent, links */
  --text:#eefaf6;
  --muted:#a7d3c9;
  --line:#2a5459;
  --comic:'Bangers', 'Impact', sans-serif;
  --body:'DM Sans', system-ui, sans-serif;
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--body);color:var(--text);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-color:var(--night);
  background-image:radial-gradient(rgba(179,255,229,.05) 1.1px, transparent 1.5px);
  background-size:7px 7px;
}
a{color:var(--mint);text-underline-offset:3px;}
a:hover{color:var(--gold);}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
img{max-width:100%;display:block;}

/* ---------- nav ---------- */
.a-nav{position:sticky;top:0;z-index:50;background:var(--night);border-bottom:2px solid var(--gold);height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.a-nav__brand{display:block;flex-shrink:0;}
.a-nav__brand img{height:34px;width:auto;}
.a-nav__links{display:flex;gap:4px;}
.a-nav__links a{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;padding:6px 12px;white-space:nowrap;}
.a-nav__links a:hover{color:var(--gold);}
.a-nav__links a[aria-current="page"]{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold);}

/* ---------- layout ---------- */
main{overflow-x:clip;}
.slab{overflow-wrap:break-word;hyphens:auto;}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;}
.prose{max-width:var(--measure);}
.field-teal{background:var(--teal);}
section{padding:64px 0;}
p+p{margin-top:14px;}
.lead{font-size:20px;line-height:1.55;}
.muted{color:var(--muted);}
h3{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:6px;}

/* ---------- the comic title (the brand's signature) ---------- */
.slab{
  font-family:var(--comic);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.02em;
  color:var(--gold);
  -webkit-text-stroke:1.5px var(--night);paint-order:stroke fill;
  text-shadow:-2px 2px 0 var(--night),-4px 4px 0 var(--night),-6px 6px 0 var(--night),-7px 7px 0 var(--night);
}
.slab--xl{font-size:clamp(3.6rem,12vw,8.5rem);transform:rotate(-5deg);transform-origin:left center;line-height:.86;}
.slab--lg{font-size:clamp(2.6rem,7vw,4.2rem);transform:rotate(-2deg);transform-origin:left center;text-shadow:-2px 2px 0 var(--night),-4px 4px 0 var(--night),-5px 5px 0 var(--night);}
.slab--md{font-size:clamp(2rem,4.5vw,2.6rem);line-height:.95;text-shadow:-2px 2px 0 var(--night),-3px 3px 0 var(--night),-4px 4px 0 var(--night);}
h2.slab{margin-bottom:24px;}

/* ---------- phase tag: two slanted plates, as on the brand board ---------- */
.phase{display:inline-flex;align-items:stretch;gap:10px;font-family:var(--comic);font-size:22px;letter-spacing:.04em;line-height:1;padding-left:8px;}
.phase > span{display:block;padding:8px 18px 6px;transform:skewX(-20deg);}
.phase > span > span{display:block;transform:skewX(20deg);}
.phase__num{background:var(--night);color:var(--gold);box-shadow:-6px 6px 0 var(--gold);}
.phase__name{background:var(--teal);color:var(--mint);box-shadow:6px 6px 0 var(--mint);}
.phase--1 .phase__name{background:var(--teal);color:var(--mint);box-shadow:6px 6px 0 var(--mint);}
.phase--2 .phase__name{background:var(--gold);color:var(--night);box-shadow:6px 6px 0 var(--night);}
.phase--3 .phase__num{background:var(--mint);color:var(--teal);box-shadow:-6px 6px 0 var(--teal);}
.phase--3 .phase__name{background:var(--teal);color:var(--mint);box-shadow:6px 6px 0 var(--mint);}
.phase--4 .phase__name{background:var(--night);color:var(--gold);box-shadow:6px 6px 0 var(--gold);}
.on-teal .phase--1 .phase__name,.on-teal .phase--3 .phase__name{background:var(--night);}
.phase--sm{font-size:17px;gap:8px;}
.phase--sm > span{padding:6px 13px 4px;}

/* small single-plate label */
.tag{display:inline-block;font-family:var(--comic);font-size:18px;letter-spacing:.05em;line-height:1;background:var(--gold);color:var(--night);padding:6px 14px 4px;transform:skewX(-14deg);}

/* ---------- comic panels ---------- */
.panel{background:var(--teal);border:3px solid var(--night);box-shadow:-8px 8px 0 var(--gold);padding:24px;}
.panel--mint{box-shadow:-8px 8px 0 var(--mint);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;font-family:var(--comic);font-size:22px;letter-spacing:.05em;line-height:1;text-decoration:none;cursor:pointer;padding:12px 22px 10px;border:3px solid var(--night);background:var(--gold);color:var(--night);box-shadow:-5px 5px 0 var(--night);transition:transform .1s,box-shadow .1s;}
.btn:hover{color:var(--night);transform:translate(2px,-2px);box-shadow:-7px 7px 0 var(--night);}
.btn:active{transform:translate(-2px,2px);box-shadow:-2px 2px 0 var(--night);}
.btn--mint{background:var(--mint);}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:22px;}
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;}
th{text-align:left;font-family:var(--comic);font-weight:400;font-size:19px;letter-spacing:.04em;color:var(--mint);padding:10px 14px;border-bottom:3px solid var(--mint);vertical-align:bottom;}
td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top;}
td strong{color:var(--gold);}

/* ---------- form fields ---------- */
.field{display:block;margin-top:18px;}
.field__q{display:block;font-weight:500;margin-bottom:8px;}
.field input,.field textarea,table input{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--night);border:2px solid var(--night);padding:10px 12px;}
.field textarea{min-height:76px;resize:vertical;}
.field input:focus,.field textarea:focus,table input:focus{outline:none;border-color:var(--gold);}
table input{padding:8px 10px;min-width:90px;background:rgba(0,0,0,.25);border-color:var(--line);}

.aff-note{margin-top:12px;font-size:13.5px;color:var(--muted);font-style:italic;}

/* ---------- SoundMinds guides (RHEMA characters) ---------- */
.guide-section{background:linear-gradient(180deg,var(--night),rgba(34,106,120,.35));}
.guide{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:48px;align-items:center;}
.guide > *{min-width:0;}
.guide__art{width:auto;max-width:100%;max-height:480px;height:auto;margin:0 auto;filter:drop-shadow(-10px 10px 0 rgba(0,0,0,.35));}
.guide__text .tag{margin-bottom:12px;}
.guide__text p{max-width:var(--measure);font-size:18px;}
.guide__links{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:22px!important;}
.guide__links a:not(.btn){font-weight:500;}
.guide-tip{display:flex;gap:16px;align-items:flex-start;margin-top:28px;max-width:var(--measure);}
.guide-tip img{width:72px;height:72px;flex-shrink:0;}
.guide-tip p{position:relative;background:var(--text);color:var(--night);font-size:16.5px;line-height:1.5;padding:14px 18px;border:3px solid var(--night);box-shadow:-5px 5px 0 var(--gold);margin:0!important;}
.guide-tip p::before{content:"";position:absolute;left:-14px;top:22px;border:8px solid transparent;border-right:12px solid var(--night);border-left:0;}
.guide-tip b{display:block;font-family:var(--comic);font-weight:400;font-size:20px;letter-spacing:.05em;color:var(--teal);}
.guide-tip--quiet p{box-shadow:-5px 5px 0 var(--mint);}
.trap{display:flex;gap:16px;align-items:flex-start;margin-top:24px;max-width:var(--measure);background:rgba(0,0,0,.28);border:2px solid var(--mint);border-left-width:6px;padding:14px 18px;}
.trap img{width:60px;height:60px;flex-shrink:0;}
.trap p{margin:0!important;font-size:16px;line-height:1.5;}
.trap b{display:block;font-family:var(--comic);font-weight:400;font-size:20px;letter-spacing:.05em;color:var(--mint);}
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:28px 24px;margin-top:28px;}
.crew a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;color:var(--text);}
.crew img{width:88px;height:88px;}
.crew b{font-family:var(--comic);font-weight:400;font-size:24px;letter-spacing:.05em;color:var(--gold);line-height:1;}
.crew{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:960px){.crew{grid-template-columns:repeat(3,minmax(0,1fr));}}
.crew span{font-size:15px;color:var(--muted);line-height:1.45;}
.crew small{font-family:var(--comic);font-size:15px;letter-spacing:.05em;color:var(--mint);}
.crew a:hover b{color:var(--mint);}
.group-art{width:100%;max-width:728px;height:auto;border:3px solid var(--night);box-shadow:-8px 8px 0 var(--gold);margin-top:8px;}
.unlock{display:flex;align-items:center;gap:10px;font-family:var(--comic);font-size:18px;letter-spacing:.04em;line-height:1;text-align:right;}
.unlock img{width:72px!important;height:72px!important;filter:none!important;opacity:1!important;}
@media (max-width:640px){
  .guide{grid-template-columns:1fr;gap:20px;}
  .guide__art{width:auto;max-width:260px;max-height:340px;margin:0 auto;}
  .guide-tip img{width:56px;height:56px;}
  .trap img{width:48px;height:48px;}
  .crew{grid-template-columns:1fr 1fr;gap:24px 16px;}
  .crew img{width:72px;height:72px;}
}
@media print{.guide-section{background:#fff;}.guide-tip p{box-shadow:none;}.trap{background:#fff;}}

/* ---------- accounts: unlock band, login, library ---------- */
@media (max-width:480px){.a-nav__links a[href="/index.html"]{display:none;}}
.unlock-band{background:var(--gold);color:var(--night);border-bottom:3px solid var(--night);}
.unlock-band .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.unlock-band p{margin:0!important;font-size:16px;}
.unlock-band .btn{background:var(--night);color:var(--gold);box-shadow:-4px 4px 0 rgba(0,0,0,.35);font-size:19px;}
.unlock-band .btn:hover{color:var(--mint);}
.notice{border:3px solid var(--night);box-shadow:-6px 6px 0 var(--mint);background:var(--text);color:var(--night);padding:16px 20px;margin:0 0 32px;max-width:var(--measure);}
.notice b{font-family:var(--comic);font-weight:400;font-size:22px;letter-spacing:.04em;display:block;line-height:1.05;margin-bottom:4px;}
.notice--gold{box-shadow:-6px 6px 0 var(--gold);}
.auth-card{max-width:460px;}
.auth-card .field input{background:var(--night);}
.auth-card .btn{margin-top:22px;}
.auth-card .err{color:var(--gold);font-weight:500;margin-top:14px!important;min-height:1.4em;}
.auth-alt{margin-top:22px!important;font-size:15px;color:var(--muted);}
.auth-alt button{font:inherit;color:var(--mint);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.lib-head[hidden]{display:none;}
.lib-head{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;justify-content:space-between;margin-bottom:28px;}
.lib-head p{color:var(--muted);font-size:15px;margin:0!important;}
.lib-head button{font:inherit;font-size:15px;color:var(--mint);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:36px 32px;}
.lib-card{display:flex;flex-direction:column;gap:12px;}
.lib-card h3{font-family:var(--comic);font-weight:400;font-size:30px;letter-spacing:.03em;color:var(--gold);line-height:.95;margin:0;}
.lib-card p{font-size:15.5px;margin:0!important;}
.lib-card .meta{font-size:13px;color:var(--mint);letter-spacing:.04em;text-transform:uppercase;}
.lib-card .btn{align-self:flex-start;margin-top:auto;}
.lib-card .price{font-family:var(--comic);font-size:22px;color:var(--mint);letter-spacing:.04em;}
.lib-card.is-owned{box-shadow:-8px 8px 0 var(--mint);}
.lib-card.is-hl{outline:4px solid var(--gold);outline-offset:4px;}
.lib-card .soon{font-size:14px;color:var(--muted);margin-top:auto!important;}
.lib-empty{color:var(--muted);}
@media (max-width:640px){.lib-grid{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
.a-foot{border-top:2px solid var(--gold);background:var(--night);padding:32px 0 48px;color:var(--muted);font-size:14px;}
.a-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;}
.a-foot img{width:40px;height:40px;}
.a-foot a{color:var(--muted);}

@media (max-width:640px){
  body{font-size:16px;}
  .wrap{padding:0 16px;}
  section{padding:48px 0;}
  .a-nav__brand img{height:26px;}
  .a-nav__links a{padding:6px 6px;font-size:13px;}
  .lead{font-size:18px;}
  .phase{font-size:18px;}
  .slab--xl{transform:rotate(-4deg);}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* ---------- print: clean and ink-friendly ---------- */
@media print{
  :root{--night:#111;--teal:#fff;--text:#111;--muted:#444;--line:#bbb;--mint:#111;--gold:#111;}
  body{background:#fff;font-size:11.5pt;}
  .a-nav,.no-print,.a-foot{display:none!important;}
  .field-teal{background:#fff;}
  section{padding:14pt 0;}
  .slab{color:#111;-webkit-text-stroke:0;text-shadow:none;transform:none!important;}
  .panel{box-shadow:none;border:1.5px solid #111;}
  .phase > span,.tag{background:#fff!important;color:#111!important;box-shadow:none!important;border:1.5px solid #111;}
  .field input,.field textarea,table input{border:0;border-bottom:1px solid #999;background:#fff;color:#111;}
}

.lib-peek{display:inline-block;margin-left:14px;font-size:15px;}
.lib-card .lib-peek{margin-top:12px;}

/* inside */
.inside{scroll-margin-top:72px;}
.inside__locked{background:var(--gold);color:var(--night);border:3px solid var(--night);box-shadow:-6px 6px 0 var(--night);padding:14px 18px;margin:0 0 28px;font-size:17px;}
.inside__locked b{font-family:var(--comic);font-weight:400;font-size:21px;letter-spacing:.04em;}
.inside .slab{margin:14px 0 26px;}
.inside__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start;}
.inside__mods{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.inside__mods li{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border-left:4px solid var(--gold);padding:14px 16px;}
.inside__mods li.is-locked-hl{background:rgba(254,201,0,.14);}
.inside__n{flex:0 0 auto;font-family:var(--comic);font-size:24px;line-height:1;color:var(--gold);min-width:20px;}
.inside__mods b{font-family:var(--comic);font-weight:400;font-size:22px;letter-spacing:.04em;color:var(--text);display:inline-block;margin-right:8px;}
.inside__mods span:not(.inside__n):not(.inside__pill){display:block;color:var(--muted,#b9d8d2);font-size:16px;line-height:1.5;margin-top:2px;}
.inside__pill{display:inline-block;vertical-align:3px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--mint);color:var(--night);padding:3px 8px;}
.inside__h{font-family:var(--comic);font-weight:400;font-size:26px;letter-spacing:.04em;color:var(--gold);margin:32px 0 12px;}
.inside__get{margin:0;padding-left:22px;display:grid;gap:6px;font-size:17px;}
.inside__get li::marker{color:var(--gold);}
.inside__fmt{margin-top:20px;font-size:14px;letter-spacing:.04em;color:var(--mint);}
.inside__buy{position:sticky;top:84px;padding:20px;}
.inside__peek{position:relative;margin:0 0 18px;border:3px solid var(--night);overflow:hidden;max-height:230px;background:var(--night);}
.inside__peek img{display:block;width:100%;height:auto;}
.inside__peek::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,35,37,0) 35%,rgba(12,35,37,.92) 100%);}
.inside__peek figcaption{position:absolute;left:12px;bottom:10px;z-index:1;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);}
.inside__price{margin:0;display:flex;align-items:baseline;gap:10px;}
.inside__price span{font-family:var(--comic);font-size:46px;line-height:1;color:var(--gold);}
.inside__price small{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);}
.inside__once{margin:6px 0 16px;font-size:15px;}
.inside__cta{width:100%;justify-content:center;}
.inside__alt{margin:12px 0 0;font-size:15px;}
.inside__or{display:flex;align-items:center;gap:10px;margin:20px 0 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);}
.inside__or::before,.inside__or::after{content:"";flex:1;height:2px;background:rgba(255,255,255,.18);}
.inside__free label{display:block;font-size:15px;line-height:1.45;margin-bottom:10px;}
.inside__freerow{display:flex;gap:10px;flex-wrap:wrap;}
.inside__freerow input{flex:1 1 180px;min-width:0;font:inherit;font-size:16px;color:var(--text);background:var(--night);border:2px solid var(--night);padding:10px 12px;}
.inside__freerow input:focus{outline:none;border-color:var(--gold);}
.inside__freerow .btn{font-size:19px;}
.inside__msg{margin:10px 0 0;font-size:15px;min-height:1px;}
.inside__msg.is-ok{color:var(--mint);}
.inside__msg.is-err{color:#ffb4a8;}
@media (max-width:860px){.inside__grid{grid-template-columns:1fr;gap:28px;}.inside__buy{position:static;}}
/* /inside */

/* workwith */
.workwith{background:linear-gradient(180deg,rgba(34,106,120,.28),var(--night));border-top:3px solid var(--night);}
.workwith .slab{margin:14px 0 18px;}
.workwith__sub{max-width:56ch;font-size:18px;margin-bottom:36px;}
.workwith__doors{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.door{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--teal);border:3px solid var(--night);box-shadow:-8px 8px 0 var(--mint);padding:24px 22px 22px;}
.door--coach{background:var(--gold);color:var(--night);box-shadow:-8px 8px 0 var(--night);}
.door__n{font-family:var(--comic);font-size:44px;line-height:1;color:var(--gold);}
.door--coach .door__n{color:var(--night);}
.door h3{font-family:var(--comic);font-weight:400;font-size:30px;letter-spacing:.04em;line-height:1;color:var(--mint);}
.door--coach h3{color:var(--night);}
.door p{font-size:16px;line-height:1.55;}
.door__cta{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
.door--coach .btn{background:var(--night);color:var(--gold);box-shadow:-5px 5px 0 var(--teal);}
.door--coach .btn:hover{color:var(--gold);}
.door__alt{font-weight:600;font-size:15px;color:var(--night);}
@media (max-width:860px){.workwith__doors{grid-template-columns:1fr;gap:24px;}}
@media print{.workwith{display:none;}}
/* /workwith */