:root{
  --cream:#FFF5E1;
  --cream-2:#FBE7C6;
  --peach:#FFB996;
  --coral:#FF8364;
  --pink:#FFA1B8;
  --grass:#A8D672;
  --grass-dk:#7BB55A;
  --sky:#A8DCEF;
  --lilac:#C9B6E4;
  --ink:#2E1F3D;
  --ink-2:#4A3960;
  --paper:#FFFBF2;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{
  font-family:'Sniglet', system-ui, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
}
/* tiny pixel grain */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(46,31,61,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,31,61,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index:0;
}
.display{font-family:'Fraunces', serif; font-weight:900; letter-spacing:-.02em;}
.mono{font-family:'JetBrains Mono', monospace;}
/* ====== NAV ====== */
nav{
  position:sticky; top:18px; z-index:50;
  margin: 18px auto 0;
  max-width: 1200px;
  padding: 0 20px;
}
.nav-inner{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius: 999px;
  padding: 12px 18px 12px 22px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:400;font-size:1.15rem;text-decoration:none;color:inherit}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--coral),var(--pink));
  border:2.5px solid var(--ink);
  display:grid;place-items:center;
  box-shadow: var(--shadow-sm);
  transform: rotate(-6deg);
}
.brand-mark svg{width:20px;height:20px}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  text-decoration:none; color:var(--ink);
  padding:8px 14px; border-radius:999px;
  font-weight:400; font-size:.95rem;
  transition:.18s ease;
}
.nav-links a:hover{background:var(--cream-2)}
.nav-links a.active{background:var(--cream-2); box-shadow: inset 0 -3px 0 var(--coral)}
.nav-cta{
  background:var(--grass); border:2.5px solid var(--ink);
  padding:8px 16px !important; border-radius:999px !important;
  box-shadow: var(--shadow-sm);
}
.nav-cta:hover{transform:translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); background:var(--grass) !important;}
/* ====== HERO ====== */
.hero{
  position:relative; z-index:1;
  max-width:1200px; margin: 40px auto 28px; padding: 0 20px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--lilac); border:2.5px solid var(--ink);
  padding:6px 14px; border-radius:999px;
  font-weight:400; font-size:.85rem;
  box-shadow: var(--shadow-sm);
  transform: rotate(-2deg);
  margin-bottom: 22px;
}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,131,100,.7);animation:pulse 1.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,131,100,.7)}
  70%{box-shadow:0 0 0 10px rgba(255,131,100,0)}
  100%{box-shadow:0 0 0 0 rgba(255,131,100,0)}
}
h1{
  font-family:'Fraunces',serif; font-weight:900;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: .98; letter-spacing:-.03em;
  margin-bottom: 22px;
}
h1 .wobble{
  display:inline-block;
  background: linear-gradient(180deg, var(--coral), var(--pink));
  -webkit-background-clip: text; background-clip:text; color:transparent;
  transform: rotate(-2deg);
}
h1 .underline{
  position:relative; display:inline-block;
}
h1 .underline::after{
  content:""; position:absolute; left:-4px; right:-4px; bottom:6px; height:14px;
  background:var(--grass); z-index:-1; border-radius:8px;
  transform: rotate(-1deg);
}
.hero p.lead{
  font-size:1.18rem; max-width: 520px; margin-bottom: 28px;
  color:var(--ink-2);
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:3px solid var(--ink); border-radius:14px;
  padding: 14px 22px; font-weight:400; font-size:1rem;
  text-decoration:none; color:var(--ink);
  background:var(--paper); cursor:pointer;
  box-shadow: var(--shadow);
  transition: .15s ease;
  font-family:'Sniglet',sans-serif;
}
.btn:hover{transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink)}
.btn:active{transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink)}
.btn-primary{background:var(--coral); color:var(--ink)}
.btn-secondary{background:var(--sky)}
.hero-stats{
  margin-top:38px; display:flex; gap: 28px; flex-wrap:wrap;
}
.stat strong{font-family:'Fraunces',serif; font-size:1.7rem; display:block; line-height:1}
.stat span{font-size:.85rem; color:var(--ink-2); font-weight:400}
/* mascot */
.mascot-wrap{position:relative; display:grid; place-items:center}
.mascot{
  width: min(420px, 100%); aspect-ratio: 1/1;
  position: relative;
  animation: float 5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform: translateY(0) rotate(-2deg)}
  50%{transform: translateY(-14px) rotate(2deg)}
}
.mascot svg{width:100%;height:100%; filter: drop-shadow(8px 8px 0 var(--ink))}
.floaty{
  position:absolute; background:var(--paper);
  border:2.5px solid var(--ink); border-radius:14px;
  padding:8px 12px; font-weight:400; font-size:.85rem;
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:6px;
}
.floaty-1{top:8%; left:-6%; transform:rotate(-6deg); background:var(--grass); animation: floaty 4s ease-in-out infinite}
.floaty-2{top:40%; right:-12%; transform:rotate(5deg); background:var(--pink); animation: floaty 4.5s ease-in-out infinite .8s}
.floaty-3{bottom:6%; left:5%; transform:rotate(-3deg); background:var(--sky); animation: floaty 5s ease-in-out infinite 1.4s}
@keyframes floaty{
  0%,100%{transform: translateY(0) rotate(var(--r,-3deg))}
  50%{transform: translateY(-8px) rotate(var(--r,-3deg))}
}
/* ====== SECTIONS ====== */
section{position:relative; z-index:1; max-width:1200px; margin: 56px auto; padding: 0 20px}
.eyebrow{
  display:inline-block; background:var(--cream-2);
  border:2.5px solid var(--ink); border-radius:999px;
  padding: 5px 14px; font-weight:400; font-size:.8rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
h2{
  font-family:'Fraunces',serif; font-weight:900;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1; letter-spacing:-.02em;
  margin-bottom: 12px;
}
.section-sub{color:var(--ink-2); font-size:1.1rem; max-width:640px; margin-bottom:24px}
/* ====== TIERS ====== */
.toggle-wrap{
  display:inline-flex; align-items:center; gap:0;
  background:var(--paper); border:3px solid var(--ink);
  border-radius: 999px; padding: 5px;
  box-shadow: var(--shadow);
  margin-bottom: 36px;
}
.toggle-btn{
  border:none; background:transparent; cursor:pointer;
  padding: 12px 22px; border-radius:999px;
  font-family:'Sniglet',sans-serif; font-weight:400; font-size:.95rem;
  color: var(--ink-2);
  display:flex; align-items:center; gap:8px;
  transition: .2s ease;
}
.toggle-btn.active{background: var(--ink); color: var(--cream)}
.toggle-btn.active .badge{background:var(--coral); color:var(--ink)}
.badge{
  background: var(--cream-2); color: var(--ink);
  border: 2px solid var(--ink); border-radius:999px;
  padding: 2px 8px; font-size:.72rem;
}
.tiers{display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 920px; margin: 0 auto}
.tier-custom{background: linear-gradient(180deg, var(--lilac), var(--sky))}
.tier-custom .tier-icon{background: var(--cream-2) !important}
.tier{
  background:var(--paper); border:3px solid var(--ink);
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow);
  position:relative; transition: .2s ease;
}
.tier:hover{transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink)}
.tier.featured{background: linear-gradient(180deg, var(--cream-2), var(--peach));}
.tier-ribbon{
  position:absolute; top:-14px; right:22px;
  background:var(--coral); border:2.5px solid var(--ink);
  border-radius:999px; padding:4px 14px;
  font-weight:400; font-size:.78rem;
  transform: rotate(4deg); box-shadow: var(--shadow-sm);
}
.tier-name{font-family:'Fraunces',serif; font-weight:900; font-size:1.6rem; margin-bottom:6px}
.tier-icon{
  width:54px; height:54px; border-radius:14px;
  border:2.5px solid var(--ink); display:grid; place-items:center;
  margin-bottom:14px; box-shadow: var(--shadow-sm);
}
.tier:nth-child(1) .tier-icon{background:var(--sky)}
.tier:nth-child(2) .tier-icon{background:var(--pink)}
.tier:nth-child(3) .tier-icon{background:var(--lilac)}
.tier:nth-child(4) .tier-icon{background:var(--grass)}
/* When the tier icon is a pixel block sprite, drop the framed swatch — the block IS the icon. */
.tier-icon:has(.block-ico){
  width:auto; height:auto; background:transparent !important;
  border:none; box-shadow:none; border-radius:0; padding:0;
  margin-bottom: 10px;
}
.tier-icon .block-ico{width:56px; height:56px}
.tier.featured .tier-icon .block-ico{width:64px; height:64px}
/* Inline block sprites inside small icon slots (modpacks, plugins, streamer perks) */
.pack-ico .block-ico,
.plugin-ico .block-ico{width:40px; height:40px}
.ex-ico .block-ico{width:32px; height:32px}
.pack-ico:has(.block-ico),
.plugin-ico:has(.block-ico),
.loader-ico:has(.block-ico),
.ex-ico:has(.block-ico){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  width: auto; height: auto; border-radius: 0;
}
.tier-blurb{color:var(--ink-2); font-size:.95rem; margin-bottom:18px; min-height:42px}
.tier-price{
  font-family:'Fraunces',serif; font-weight:900;
  font-size: 2.6rem; line-height:1; margin-bottom: 4px;
}
.tier-price small{font-family:'Sniglet'; font-size:.95rem; font-weight:400; color:var(--ink-2)}
.setup-line{
  margin: 10px 0 18px; padding: 10px 12px;
  background: var(--cream); border: 2px dashed var(--ink);
  border-radius: 12px; font-size:.85rem; font-weight:400;
  display:none;
}
.setup-line.show{display:flex; align-items:center; gap:8px}
.tier ul{list-style:none; margin: 18px 0 22px}
.tier li{display:flex; gap:10px; align-items:flex-start; padding: 7px 0; font-size:.95rem}
.tier li .check{
  flex-shrink:0; width:22px;height:22px; border-radius:50%;
  background:var(--grass); border:2px solid var(--ink);
  display:grid; place-items:center; margin-top:1px;
}
.tier li .check svg{width:12px;height:12px}
.tier .btn{width:100%; justify-content:center}
/* ====== MODPACKS ====== */
.modpacks{
  background: var(--paper); border:3px solid var(--ink);
  border-radius: var(--r-lg); padding: 36px;
  box-shadow: var(--shadow);
  display:grid; grid-template-columns: 1fr 1.3fr; gap:40px; align-items:center;
}
.versions{display:flex; flex-wrap:wrap; gap:10px; margin-top: 22px}
.ver-chip{
  background: var(--cream); border:2.5px solid var(--ink);
  border-radius: 10px; padding: 8px 12px;
  font-weight:400; font-size:.88rem;
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:6px;
  transition:.15s ease;
}
.ver-chip:hover{transform:translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink)}
.ver-chip.hot{background:var(--coral)}
.ver-chip.cool{background:var(--sky)}
.ver-chip.fresh{background:var(--grass)}
.ver-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.pack-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.pack{
  background: var(--cream); border: 2.5px solid var(--ink);
  border-radius: 14px; padding: 16px;
  display:flex; gap:12px; align-items:center;
  box-shadow: var(--shadow-sm);
  transition:.15s ease;
}
.pack:hover{transform: rotate(-1deg) translateY(-2px); box-shadow: 5px 5px 0 var(--ink)}
.pack-ico{
  width:44px;height:44px; border-radius:10px;
  border:2px solid var(--ink); display:grid;place-items:center;
  font-size:1.4rem; flex-shrink:0;
}
.pack:nth-child(1) .pack-ico{background:var(--grass)}
.pack:nth-child(2) .pack-ico{background:var(--pink)}
.pack:nth-child(3) .pack-ico{background:var(--sky)}
.pack:nth-child(4) .pack-ico{background:var(--lilac)}
.pack:nth-child(5) .pack-ico{background:var(--peach)}
.pack:nth-child(6) .pack-ico{background:var(--cream-2)}
.pack-name{font-weight:400; font-size:.95rem; line-height:1.1}
.pack-meta{font-size:.78rem; color:var(--ink-2); margin-top:2px}
/* ====== EVENTS ====== */
.event-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
  margin-bottom: 36px;
}
.event-card{
  background:var(--paper); border:3px solid var(--ink);
  border-radius: var(--r-md); padding: 26px;
  box-shadow: var(--shadow);
  position:relative;
  transition:.2s ease;
  display:flex; flex-direction:column;
}
.event-card:hover{transform: translate(-3px,-3px) rotate(-.5deg); box-shadow: 9px 9px 0 var(--ink)}
.event-card.featured{
  background: linear-gradient(160deg, var(--paper) 50%, var(--peach) 50%);
}
.event-ribbon{
  position:absolute; top:-14px; right:18px;
  background:var(--coral); border:2.5px solid var(--ink);
  border-radius:999px; padding:4px 14px;
  font-weight:400; font-size:.78rem;
  transform: rotate(4deg); box-shadow: var(--shadow-sm);
}
.event-tag{
  display:inline-block;
  background:var(--lilac); border:2.5px solid var(--ink);
  border-radius:8px; padding: 4px 10px;
  font-weight:400; font-size:.78rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  align-self:flex-start;
}
.event-card:nth-child(2) .event-tag{background:var(--grass)}
.event-card:nth-child(3) .event-tag{background:var(--sky)}
.event-card h3{font-family:'Fraunces',serif; font-size:1.45rem; margin-bottom:8px; line-height:1.1}
.event-card > p{color:var(--ink-2); font-size:.95rem; margin-bottom: 16px}
.event-feats{list-style:none; margin-top: auto; display:flex; flex-direction:column; gap:6px}
.event-feats li{
  font-size:.88rem; font-weight:400;
  padding: 6px 10px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 8px;
}
.event-pricing{display:flex; justify-content:center}
.event-price-card{
  background:var(--ink); color: var(--cream);
  border:3px solid var(--ink); border-radius: var(--r-md);
  padding: 22px 28px;
  box-shadow: 8px 8px 0 var(--coral);
  display:flex; align-items:center; gap: 24px;
  flex-wrap:wrap;
  max-width: 900px; width: 100%;
}
.event-price-label{font-size:.85rem; color: var(--cream-2); font-weight:400; margin-bottom: 2px}
.event-price-amount{font-family:'Fraunces',serif; font-weight:900; font-size: 2.4rem; line-height: 1}
.event-price-amount small{font-family:'Sniglet'; font-size:.95rem; font-weight:400; color:var(--cream-2)}
.event-divider{width:2px; height:50px; background: rgba(255,245,225,.2); border-radius:2px}
.event-perks{display:flex; flex-direction:column; gap:4px; font-size:.88rem; font-weight:400; flex:1; min-width: 200px}
.event-price-card .btn{background:var(--coral); border-color: var(--cream)}
/* ====== STREAMER PERKS ====== */
.perks{display:grid; grid-template-columns: repeat(3,1fr); gap:22px}
.perk{
  background: var(--paper); border:3px solid var(--ink);
  border-radius: var(--r-md); padding: 24px;
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
  transition:.2s ease;
}
.perk:hover{transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink)}
.perk:nth-child(1){background: linear-gradient(150deg, var(--paper) 60%, var(--pink) 60%)}
.perk:nth-child(2){background: linear-gradient(150deg, var(--paper) 60%, var(--grass) 60%)}
.perk:nth-child(3){background: linear-gradient(150deg, var(--paper) 60%, var(--sky) 60%)}
.perk-ico{
  width:60px;height:60px; border-radius:16px;
  background:var(--ink); color:var(--cream);
  display:grid; place-items:center;
  margin-bottom:18px; transform: rotate(-6deg);
  box-shadow: var(--shadow-sm);
}
.perk-ico svg{width:30px;height:30px}
.perk h3{font-family:'Fraunces',serif; font-size:1.35rem; margin-bottom:8px; line-height:1.1}
.perk p{font-size:.95rem; color:var(--ink-2)}
/* ====== FAQ ====== */
.faq-wrap{display:grid; grid-template-columns: .8fr 1.2fr; gap:50px; align-items:start}
.faq-side h2{margin-bottom:18px}
.faq-side p{color:var(--ink-2); margin-bottom:24px}
.discord-card{
  background: var(--lilac); border:3px solid var(--ink);
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--shadow);
}
.discord-card h3{font-family:'Fraunces'; font-size:1.4rem; margin-bottom:6px}
.discord-card p{font-size:.95rem; margin-bottom:14px}
.faq-list{display:flex; flex-direction:column; gap:12px}
details{
  background: var(--paper); border:3px solid var(--ink);
  border-radius: var(--r-sm); padding: 0;
  box-shadow: var(--shadow-sm);
  transition:.15s ease;
}
details[open]{box-shadow: var(--shadow); transform:translate(-1px,-1px)}
summary{
  cursor:pointer; list-style:none;
  padding: 18px 22px; font-weight:400; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; font-family:'Fraunces'; font-size:1.6rem; font-weight:900;
  width:30px;height:30px; border-radius:50%; background:var(--cream-2);
  border:2px solid var(--ink); display:grid; place-items:center; flex-shrink:0;
  transition:.2s ease;
}
details[open] summary::after{content:"−"; background:var(--coral); transform: rotate(180deg)}
details > div{padding: 0 22px 22px; color:var(--ink-2); font-size:.97rem}
/* ====== FOOTER ====== */
footer{
  background:var(--ink); color:var(--cream);
  margin-top: 80px; padding: 60px 20px 30px;
  border-top: 4px solid var(--ink);
  position:relative; z-index:1;
}
.foot-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px}
.foot-brand .brand{color:var(--cream); margin-bottom: 12px}
.foot-brand p{color: #d8c9b3; font-size:.95rem; max-width:300px}
footer h4{font-family:'Fraunces'; font-size:1.1rem; margin-bottom:14px}
footer ul{list-style:none; display:flex; flex-direction:column; gap:8px}
footer a{color:#d8c9b3; text-decoration:none; font-size:.93rem}
footer a:hover{color:var(--coral)}
.foot-bottom{
  max-width:1200px; margin:50px auto 0; padding-top:24px;
  border-top:2px dashed rgba(255,245,225,.2);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.85rem; color:#a8997f;
}
/* ====== RESPONSIVE ====== */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; gap:20px}
  .mascot-wrap{order:-1; margin-bottom: 10px}
  .mascot{width:min(300px,80%)}
  .tiers{grid-template-columns:1fr 1fr}
  .modpacks{grid-template-columns:1fr; padding:24px}
  .event-grid{grid-template-columns:1fr}
  .event-price-card{flex-direction:column; align-items:flex-start}
  .event-divider{display:none}
  .perks{grid-template-columns:1fr}
  .faq-wrap{grid-template-columns:1fr; gap:30px}
  .foot-inner{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width: 720px){
  .tiers{grid-template-columns:1fr}
  .nav-cards{grid-template-columns:1fr; gap: 16px}
  .auth-grid{grid-template-columns:1fr !important; gap:24px !important}
  .auth-card-wide{padding: 26px 22px}
  .page-header{margin: 40px auto 10px}
}
@media (max-width: 520px){
  .pack-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  .hero-stats{gap:18px; grid-template-columns: 1fr 1fr}
  h1{font-size: clamp(2rem, 7vw, 2.4rem)}
  nav{margin: 10px auto 0; padding: 0 12px}
  .auth-wrap{padding: 0 12px}
  section, .legal{padding-left: 14px; padding-right: 14px}
  body{font-size: 15px}
  .hero-ctas{flex-direction: column; align-items: stretch}
  .hero-ctas .btn{width: 100%; justify-content: center}
}

/* === MOBILE NAV (hamburger) === */
.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  background: var(--cream-2); border: 2.5px solid var(--ink);
  border-radius: 12px; box-shadow: var(--shadow-sm);
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-toggle:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.nav-toggle:active{ transform: translate(0,0) scale(.96); }
.nav-toggle-bars{
  display: inline-block; position: relative;
  width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px;
}
.nav-toggle-bars::before, .nav-toggle-bars::after{
  content: ""; position: absolute; left: 0; width: 20px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, top .2s ease, opacity .15s ease;
}
.nav-toggle-bars::before{ top: -6px; }
.nav-toggle-bars::after{ top: 6px; }
nav.nav-open .nav-toggle-bars{ background: transparent; }
nav.nav-open .nav-toggle-bars::before{ top: 0; transform: rotate(45deg); }
nav.nav-open .nav-toggle-bars::after{ top: 0; transform: rotate(-45deg); }

@media (max-width: 820px){
  .nav-inner{ flex-wrap: wrap; }
  .nav-toggle{ display: inline-flex; }
  .nav-links{
    order: 3; flex-basis: 100%;
    flex-direction: column; align-items: stretch;
    gap: 6px; padding: 10px 4px 4px;
    border-top: 2.5px dashed rgba(46,31,61,.2);
    margin-top: 10px;
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease, padding .2s ease, margin-top .2s ease, opacity .2s ease;
    opacity: 0;
  }
  nav.nav-open .nav-links{
    max-height: 700px; opacity: 1;
  }
  .nav-links a{
    display: block; padding: 12px 14px; font-size: 1rem;
    border-radius: 12px;
  }
  .nav-links a.nav-cta{
    text-align: center; background: var(--coral); color: var(--ink);
    border: 2.5px solid var(--ink); margin-top: 4px;
    box-shadow: var(--shadow-sm);
  }
}

/* === MOBILE TAP-TARGET & READABILITY GUARDS === */
@media (max-width: 720px){
  /* iOS won't zoom inputs at 16px+ */
  .field input, .field textarea, .contact-textarea, .calc-field input[type="range"]{ font-size: 16px; }
  /* Buttons hit 44px min height */
  .btn{ min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  /* Reduce hero floaties (they overlap mascot on tiny screens) */
  .floaty{ font-size: .75rem; padding: 6px 10px; }
  /* Nav cards and tiers — slightly tighter padding */
  .tier, .nav-card{ padding: 22px 20px; }
  .tier-price{ font-size: 2.2rem; }
}

/* ====== PAGE HEADER (sub-pages) ====== */
.page-header{
  position:relative; z-index:1;
  max-width:1200px; margin: 60px auto 20px; padding: 0 20px;
  text-align:left;
}
.page-title{
  font-family:'Fraunces',serif; font-weight:900;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1; letter-spacing:-.02em;
  margin-bottom: 16px;
  max-width: 900px;
}
.page-sub{color:var(--ink-2); font-size:1.15rem; max-width:680px}

/* ====== HOME NAV CARDS ====== */
.nav-cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.nav-card{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 26px;
  box-shadow: var(--shadow);
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:8px;
  position:relative; overflow:hidden;
  transition:.2s ease;
}
.nav-card:hover{transform: translate(-3px,-3px) rotate(-.5deg); box-shadow: 9px 9px 0 var(--ink)}
.nav-card-1{background: linear-gradient(160deg, var(--paper) 55%, var(--sky) 55%)}
.nav-card-2{background: linear-gradient(160deg, var(--paper) 55%, var(--grass) 55%)}
.nav-card-3{background: linear-gradient(160deg, var(--paper) 55%, var(--pink) 55%)}
.nav-card-4{background: linear-gradient(160deg, var(--paper) 55%, var(--lilac) 55%)}
.nav-card-5{background: linear-gradient(160deg, var(--paper) 55%, var(--peach) 55%)}
.nav-card-6{background: linear-gradient(160deg, var(--paper) 55%, var(--coral) 55%)}
.nav-card-ico{
  width:54px; height:54px; border-radius:14px;
  background: var(--ink); color: var(--cream);
  display:grid; place-items:center;
  font-size: 1.6rem; margin-bottom: 6px;
  box-shadow: var(--shadow-sm);
  transform: rotate(-6deg);
}
.nav-card h3{font-family:'Fraunces',serif; font-weight:900; font-size:1.35rem; line-height:1.1; margin-bottom:4px}
.nav-card p{color:var(--ink-2); font-size:.95rem; margin-bottom: 12px}
.nav-card-arrow{
  margin-top:auto; font-weight:400; font-size:.95rem;
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
  background: var(--cream-2); border: 2.5px solid var(--ink);
  padding: 6px 12px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.nav-card:hover .nav-card-arrow{background: var(--coral)}

/* ====== STEPS ====== */
.steps{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 22px;
}
.step{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 28px 24px;
  box-shadow: var(--shadow);
  position:relative;
}
.step:nth-child(1){background: linear-gradient(180deg, var(--cream-2), var(--paper))}
.step:nth-child(2){background: linear-gradient(180deg, var(--sky), var(--paper))}
.step:nth-child(3){background: linear-gradient(180deg, var(--grass), var(--paper))}
.step-num{
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  font-family:'Fraunces',serif; font-weight:900; font-size: 1.5rem;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  transform: rotate(-4deg);
}
.step h3{font-family:'Fraunces',serif; font-size: 1.3rem; margin-bottom: 6px; line-height:1.1}
.step p{color: var(--ink-2); font-size:.95rem}

/* ====== LOADERS (modpacks page) ====== */
.loaders{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.loader-card{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-sm); padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:14px;
  transition:.15s ease;
}
.loader-card:hover{transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink)}
.loader-ico{
  width:48px; height:48px; border-radius: 12px;
  background: var(--cream-2); border: 2.5px solid var(--ink);
  display:grid; place-items:center;
  font-size: 1.5rem;
  flex-shrink:0;
}
.loader-card:nth-child(1) .loader-ico{background:var(--coral)}
.loader-card:nth-child(2) .loader-ico{background:var(--sky)}
.loader-card:nth-child(3) .loader-ico{background:var(--grass)}
.loader-card:nth-child(4) .loader-ico{background:var(--lilac)}
.loader-card:nth-child(5) .loader-ico{background:var(--peach)}
.loader-card:nth-child(6) .loader-ico{background:var(--pink)}
.loader-name{font-weight:400; font-size: 1rem; line-height:1.1}
.loader-meta{font-size:.8rem; color: var(--ink-2); margin-top:2px}

/* ====== PLUGINS (modpacks page) ====== */
.plugin-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-bottom: 28px;
}
.plugin-card{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--shadow);
  transition:.15s ease;
  display:flex; flex-direction:column; gap:8px;
}
.plugin-card:hover{transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink)}
.plugin-card:nth-child(6n+1){background: linear-gradient(160deg, var(--paper) 60%, var(--coral) 60%)}
.plugin-card:nth-child(6n+2){background: linear-gradient(160deg, var(--paper) 60%, var(--grass) 60%)}
.plugin-card:nth-child(6n+3){background: linear-gradient(160deg, var(--paper) 60%, var(--pink) 60%)}
.plugin-card:nth-child(6n+4){background: linear-gradient(160deg, var(--paper) 60%, var(--lilac) 60%)}
.plugin-card:nth-child(6n+5){background: linear-gradient(160deg, var(--paper) 60%, var(--sky) 60%)}
.plugin-card:nth-child(6n+6){background: linear-gradient(160deg, var(--paper) 60%, var(--peach) 60%)}
.plugin-ico{
  width:50px; height:50px; border-radius:12px;
  background: var(--ink); color: var(--cream);
  display:grid; place-items:center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
  transform: rotate(-6deg);
  margin-bottom: 4px;
}
.plugin-card h3{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.2rem; line-height: 1.1;
}
.plugin-list{
  font-size:.88rem; color: var(--ink-2);
  font-family:'JetBrains Mono', monospace;
  background: var(--cream); border: 2px dashed var(--ink);
  padding: 8px 10px; border-radius: 8px;
  line-height: 1.5;
}
.plugin-note{
  background: var(--ink); color: var(--cream);
  border: 3px solid var(--ink); border-radius: var(--r-md);
  padding: 22px 26px;
  box-shadow: 8px 8px 0 var(--grass);
  font-size:.97rem; line-height: 1.6;
}
.plugin-note strong{
  display:inline-block; background: var(--coral); color: var(--ink);
  padding: 2px 10px; border-radius: 6px;
  margin-right: 6px; font-weight: 900;
}
.plugin-note code{
  font-family:'JetBrains Mono', monospace;
  background: rgba(255,245,225,.15); color: var(--cream);
  padding: 1px 6px; border-radius: 4px;
  font-size:.85em;
}
@media (max-width: 980px){
  .plugin-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .plugin-grid{grid-template-columns: 1fr}
}

/* ====== EXTRA PERKS (streamers page) ====== */
.extra-perks{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.extra-perk{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-sm); padding: 20px;
  box-shadow: var(--shadow-sm);
  transition:.15s ease;
}
.extra-perk:hover{transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink)}
.ex-ico{
  width:42px; height:42px; border-radius: 10px;
  background: var(--cream-2); border: 2.5px solid var(--ink);
  display:grid; place-items:center;
  font-size: 1.3rem; margin-bottom: 10px;
}
.extra-perk:nth-child(6n+1) .ex-ico{background:var(--coral)}
.extra-perk:nth-child(6n+2) .ex-ico{background:var(--sky)}
.extra-perk:nth-child(6n+3) .ex-ico{background:var(--grass)}
.extra-perk:nth-child(6n+4) .ex-ico{background:var(--lilac)}
.extra-perk:nth-child(6n+5) .ex-ico{background:var(--peach)}
.extra-perk:nth-child(6n+6) .ex-ico{background:var(--pink)}
.extra-perk h4{font-family:'Fraunces',serif; font-size: 1.1rem; margin-bottom: 4px; line-height:1.1}
.extra-perk p{color: var(--ink-2); font-size:.9rem}

/* ====== CONTACT CARD (faq page) ====== */
.contact-card{
  background: var(--cream-2); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--shadow);
  margin-top: 16px;
}
.contact-card h3{font-family:'Fraunces'; font-size: 1.3rem; margin-bottom: 6px}
.contact-card p{font-size:.95rem; margin-bottom: 14px}

/* ====== RESPONSIVE (extras) ====== */
@media (max-width: 980px){
  .nav-cards{grid-template-columns: 1fr 1fr}
  .steps{grid-template-columns:1fr}
  .loaders{grid-template-columns: 1fr 1fr}
  .extra-perks{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .nav-cards{grid-template-columns:1fr}
  .loaders{grid-template-columns:1fr}
  .extra-perks{grid-template-columns:1fr}
  .page-title{font-size: 2.2rem}
}

/* =================================================================
   AUTH PAGES (login + signup)
================================================================= */
.auth-wrap{
  position:relative; z-index:1;
  max-width: 560px; margin: 60px auto 80px;
  padding: 0 20px;
}
.auth-card{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: 40px;
  box-shadow: var(--shadow);
  position:relative;
}
.auth-card-wide{max-width: 980px; margin: 0 auto}
.auth-wrap:has(.auth-card-wide){max-width: 1020px}
.auth-mascot{
  width: 100px; height: 100px; margin: -75px auto 14px;
  background: var(--cream-2); border-radius: 50%;
  border: 3px solid var(--ink); padding: 6px;
  box-shadow: var(--shadow-sm);
}
.auth-mascot svg{width: 100%; height: 100%}
.auth-title{
  font-family:'Fraunces',serif; font-weight:900;
  font-size: 2.2rem; line-height:1; letter-spacing:-.02em;
  margin-bottom: 8px; text-align:center;
}
.auth-card-wide .auth-title{text-align:left; font-size: 2.4rem}
.auth-sub{
  color: var(--ink-2); font-size: 1rem;
  text-align:center; margin-bottom: 24px;
}
.auth-card-wide .auth-sub{text-align:left; margin-bottom: 22px}
.auth-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.auth-left{display:flex; flex-direction:column}
.auth-perks{list-style:none; margin-bottom: 24px}
.auth-perks li{
  display:flex; gap:10px; align-items:flex-start;
  padding: 7px 0; font-size:.95rem; font-weight:400;
}
.auth-perks .check{
  flex-shrink:0; width:22px;height:22px; border-radius:50%;
  background:var(--grass); border:2px solid var(--ink);
  display:grid; place-items:center; margin-top:1px;
}
.auth-perks .check svg{width:12px;height:12px}
.auth-trust{
  display:flex; gap: 18px; padding: 16px;
  background: var(--cream); border: 2.5px dashed var(--ink);
  border-radius: var(--r-sm);
  margin-top: auto;
}
.trust-stat strong{
  font-family:'Fraunces',serif; font-size: 1.4rem;
  display:block; line-height:1;
}
.trust-stat span{font-size:.78rem; color: var(--ink-2); font-weight:400}

.auth-form{display:flex; flex-direction:column; gap: 14px}
.field{display:flex; flex-direction:column; gap: 6px}
.field-label{font-size:.85rem; font-weight:400; color: var(--ink)}
.optional{color: var(--ink-2); font-weight: 400}
.field input{
  font-family:'Sniglet',sans-serif; font-size: 1rem; font-weight: 400;
  padding: 12px 14px;
  border: 2.5px solid var(--ink); border-radius: var(--r-sm);
  background: var(--cream); color: var(--ink);
  outline: none;
  transition: .15s ease;
}
.field input::placeholder{color: var(--ink-2); opacity:.6}
.field input:focus{
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px,-1px);
}
.field-hint{font-size:.78rem; color: var(--ink-2)}
.form-row{
  display:flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; font-size:.9rem;
}
.checkbox{
  display:flex; align-items:center; gap: 8px;
  font-size:.9rem; font-weight: 400; cursor: pointer;
}
.checkbox input{
  width: 18px; height: 18px;
  accent-color: var(--coral);
  cursor: pointer;
}
.checkbox-wide{margin-top: 4px; font-weight: 400; align-items:flex-start}
.checkbox-wide span{padding-top: 2px}
.link{color: var(--ink); text-decoration: underline; text-underline-offset: 3px}
.link:hover{color: var(--coral)}
.link.strong{font-weight: 400; text-decoration: none; border-bottom: 2.5px solid var(--coral)}
.auth-submit{justify-content: center; margin-top: 6px}
.divider{
  display:flex; align-items:center; gap: 12px;
  margin: 24px 0; color: var(--ink-2); font-size:.85rem; font-weight: 400;
}
.divider::before, .divider::after{
  content:""; flex:1; height: 2px;
  background: var(--ink); opacity: .15; border-radius: 2px;
}
.social-row{display:flex; gap: 10px; flex-wrap: wrap}
.social-btn{
  flex: 1; min-width: 130px; justify-content: center;
  font-size:.92rem; padding: 12px 14px;
}
.social-btn:nth-child(1){background: var(--lilac)}
.social-btn:nth-child(2){background: var(--sky)}
.social-btn:nth-child(3){background: var(--cream-2)}
.social-btn-twitch{background: #9146FF !important; color: #FFF5E1 !important; font-weight: 800}
.social-btn-twitch:hover{background: #7c2ff0 !important}
.auth-footer{
  text-align: center; font-size:.95rem;
  color: var(--ink-2); margin-top: 22px;
}
.auth-card-wide .auth-footer{text-align: left; margin-top: 6px}

/* =================================================================
   DASHBOARD
================================================================= */
.dash-body{background: var(--cream)}
.dash{
  position:relative; z-index:1;
  max-width: 1280px; margin: 40px auto 60px;
  padding: 0 20px;
  display:grid; grid-template-columns: 260px 1fr; gap: 28px;
  align-items: start;
}
.user-chip{
  display:inline-flex !important; align-items:center; gap: 8px;
  background: var(--cream-2) !important; border: 2.5px solid var(--ink);
  padding: 6px 12px 6px 6px !important; border-radius: 999px !important;
  box-shadow: var(--shadow-sm);
}
.user-chip:hover{background: var(--peach) !important}
.user-avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--coral); color: var(--ink);
  border: 2px solid var(--ink);
  display:grid; place-items:center;
  font-family:'Fraunces',serif; font-weight: 900; font-size:.9rem;
}
.user-name{font-weight: 400; font-size:.9rem}

/* SIDEBAR */
.dash-side{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 18px;
  box-shadow: var(--shadow);
  position: sticky; top: 100px;
  display:flex; flex-direction:column; gap: 18px;
}
.dash-side-section{display:flex; flex-direction:column; gap: 4px}
.dash-side-label{
  font-size:.72rem; font-weight: 400;
  color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .08em; padding: 4px 12px 6px;
}
.dash-link{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink);
  font-weight: 400; font-size:.95rem;
  border: 2px solid transparent;
  transition: .15s ease;
}
.dash-link:hover{background: var(--cream-2)}
.dash-link.active{
  background: var(--cream-2); border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.dash-link-ico{font-size: 1.1rem; width: 22px; text-align:center}
.dash-link-badge{
  margin-left: auto;
  background: var(--ink); color: var(--cream);
  font-size:.72rem; font-weight: 400;
  padding: 2px 8px; border-radius: 999px;
}
.dash-link-badge.hot{background: var(--coral); color: var(--ink)}
.dash-side-card{
  background: var(--lilac); border: 2.5px solid var(--ink);
  border-radius: var(--r-sm); padding: 16px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  margin-top: 4px;
}
.dash-side-card-emoji{font-size: 1.6rem; margin-bottom: 4px}
.dash-side-card h4{font-family:'Fraunces',serif; font-size: 1rem; margin-bottom: 4px}
.dash-side-card p{font-size:.82rem; color: var(--ink-2); margin-bottom: 10px}
.dash-side-btn{padding: 8px 14px; font-size:.85rem; width: 100%; justify-content: center}

/* MAIN */
.dash-main{display:flex; flex-direction:column; gap: 28px}
.dash-head{
  display:flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
}
.dash-eyebrow{
  display:inline-block; font-size:.85rem; font-weight: 400;
  color: var(--ink-2); margin-bottom: 4px;
}
.dash-title{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 2.2rem; line-height: 1; letter-spacing:-.02em;
}

/* STAT CARDS */
.dash-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.dash-stat{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 18px;
  box-shadow: var(--shadow);
  display:flex; align-items:center; gap: 14px;
  transition: .15s ease;
}
.dash-stat:hover{transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--ink)}
.stat-1{background: linear-gradient(140deg, var(--paper) 65%, var(--grass) 65%)}
.stat-2{background: linear-gradient(140deg, var(--paper) 65%, var(--pink) 65%)}
.stat-3{background: linear-gradient(140deg, var(--paper) 65%, var(--sky) 65%)}
.stat-4{background: linear-gradient(140deg, var(--paper) 65%, var(--lilac) 65%)}
.dash-stat-ico{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--ink); color: var(--cream);
  display:grid; place-items:center;
  font-size: 1.3rem;
  border: 2px solid var(--ink);
  transform: rotate(-6deg);
  flex-shrink: 0;
}
.dash-stat-num{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.8rem; line-height: 1;
}
.dash-stat-label{font-size:.82rem; color: var(--ink-2); font-weight: 400; margin-top: 2px}

/* SERVERS */
.dash-section-head{
  display:flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin: 8px 0 14px;
}
.dash-section-title{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.6rem; line-height: 1;
}
.dash-filter{
  display:flex; gap: 0; background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 4px; box-shadow: var(--shadow-sm);
}
.filter-btn{
  border: none; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  font-family:'Sniglet',sans-serif; font-weight: 400; font-size:.85rem;
  color: var(--ink-2);
  transition: .15s ease;
}
.filter-btn.active{background: var(--ink); color: var(--cream)}

.server-list{display:flex; flex-direction: column; gap: 16px}
.server-card{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 20px;
  box-shadow: var(--shadow);
  display:flex; flex-direction: column; gap: 16px;
  transition: .15s ease;
}
.server-card:hover{transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--ink)}
.server-sleeping{opacity: .85; background: var(--cream)}
.server-empty{background: var(--cream-2); border: 2.5px solid var(--ink); border-radius: 22px; padding: 44px 28px; text-align: center; box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; align-items: center; gap: 12px}
.server-empty-ico{font-size: 48px}
.server-empty h3{font-family: 'Fraunces', serif; font-size: 28px; margin: 0}
.server-empty p{color: var(--ink-soft); max-width: 460px; margin: 0 0 8px}
.waitlist-card{margin-top: 22px; background: var(--cream-2); border: 2.5px solid var(--ink); border-radius: 18px; padding: 18px 20px; box-shadow: 5px 5px 0 var(--ink); max-width: 580px}
.waitlist-head{display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 12px}
.waitlist-emoji{font-size: 22px}
.waitlist-head strong{font-family: 'Fraunces', serif; font-size: 20px}
.waitlist-sub{color: var(--ink-soft); font-size: 14px; flex-basis: 100%}
.waitlist-form{display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px}
.waitlist-form input{padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-family: inherit; font-size: 14px}
.waitlist-form button{white-space: nowrap}
.waitlist-msg{font-size: 14px; margin-top: 8px; min-height: 20px}
.waitlist-msg.is-ok{color: #2d7a2d; font-weight: 800}
.waitlist-msg.is-err{color: #b32820; font-weight: 800}
.waitlist-result{margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(0,0,0,.15)}
.waitlist-share{display: flex; gap: 8px; align-items: center; margin-top: 6px}
.waitlist-share code{flex: 1; background: #fff; border: 2px solid var(--ink); padding: 8px 10px; border-radius: 8px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
@media (max-width: 640px){
  .waitlist-form{grid-template-columns: 1fr}
}
.status-headline{display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); font-weight: 800; font-size: 18px; margin-top: 14px}
.status-headline .status-dot{width: 12px; height: 12px; border-radius: 50%; background: #888}
.status-headline.status-ok{background: #A8D672}
.status-headline.status-ok .status-dot{background: #2d7a2d}
.status-headline.status-warn{background: #FFD27A}
.status-headline.status-warn .status-dot{background: #b56b00}
.status-headline.status-err{background: #FF8C73}
.status-headline.status-err .status-dot{background: #8a2820}
.incident{border: 2.5px solid var(--ink); border-radius: 14px; padding: 14px 16px; margin: 10px 0; background: var(--cream-2); box-shadow: 4px 4px 0 var(--ink)}
.incident-warn{background: #FFE9B8}
.incident-err{background: #FFC9BD}
.incident-resolved{background: var(--cream-2); opacity: .85}
.incident-head{display: flex; justify-content: space-between; align-items: center; gap: 12px}
.incident-sev{font-size: 12px; text-transform: uppercase; letter-spacing: .5px; background: var(--ink); color: var(--cream); padding: 4px 10px; border-radius: 999px; font-weight: 800}
.incident p{margin: 8px 0; color: var(--ink-soft)}
.incident-meta{font-size: 13px; color: var(--ink-soft); margin-top: 6px}
.server-top{
  display:flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.server-status{
  display:inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  border: 2.5px solid var(--ink);
  font-weight: 400; font-size:.82rem;
  box-shadow: var(--shadow-sm);
}
.server-status.running{background: var(--grass)}
.server-status.sleeping{background: var(--cream-2)}
.status-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
}
.server-status.running .status-dot{
  background: var(--ink);
  box-shadow: 0 0 0 0 rgba(46,31,61,.6);
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot{
  0%{box-shadow: 0 0 0 0 rgba(46,31,61,.5)}
  70%{box-shadow: 0 0 0 6px rgba(46,31,61,0)}
  100%{box-shadow: 0 0 0 0 rgba(46,31,61,0)}
}
.server-tier{
  background: var(--lilac); border: 2.5px solid var(--ink);
  padding: 4px 10px; border-radius: 8px;
  font-weight: 400; font-size:.78rem;
  box-shadow: var(--shadow-sm);
}
.event-tier{background: var(--coral)}
.server-main{
  display:grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
}
.server-ico{
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--cream-2); border: 2.5px solid var(--ink);
  display:grid; place-items:center;
  font-size: 1.8rem; box-shadow: var(--shadow-sm);
}
.server-name{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.4rem; line-height: 1.1; margin-bottom: 4px;
}
.server-meta{font-size:.85rem; color: var(--ink-2); font-weight: 400; margin-bottom: 4px}
.server-ip{
  font-size:.82rem; color: var(--ink);
  background: var(--cream); padding: 3px 8px;
  border: 2px dashed var(--ink); border-radius: 6px;
  display:inline-block;
}
.server-tag{
  margin-top: 6px; font-size:.78rem; font-weight: 400;
  display:inline-block;
  background: var(--peach); border: 2px solid var(--ink);
  padding: 3px 8px; border-radius: 6px;
}
.server-tag.muted{background: var(--cream-2); color: var(--ink-2)}
.server-numbers{
  display:flex; gap: 18px;
}
.server-num{text-align: center; min-width: 60px}
.server-num strong{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.2rem; display:block; line-height: 1;
}
.server-num span{font-size:.72rem; color: var(--ink-2); font-weight: 400}
.server-actions{
  display:flex; flex-wrap: wrap; gap: 8px;
  padding-top: 16px;
  border-top: 2px dashed var(--ink);
}
.srv-btn{
  padding: 8px 14px !important;
  font-size:.85rem !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--cream) !important;
}
.srv-btn:hover{transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink) !important}
.srv-btn-primary{background: var(--coral) !important}

/* TWO-COL PANELS */
.dash-two-col{
  display:grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.dash-panel{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--shadow);
}
.dash-panel-head{
  display:flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.dash-panel-title{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.3rem;
}

.activity{list-style: none; display:flex; flex-direction: column; gap: 10px}
.activity li{
  display:flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--cream); border: 2px solid var(--ink);
  border-radius: 10px; font-size:.9rem;
}
.act-dot{
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ink); margin-top: 6px;
  flex-shrink: 0;
}
.act-dot.grass{background: var(--grass)}
.act-dot.sky{background: var(--sky)}
.act-dot.pink{background: var(--pink)}
.act-dot.lilac{background: var(--lilac)}
.act-dot.coral{background: var(--coral)}
.act-time{color: var(--ink-2); font-weight: 400; font-size:.82rem}

.backups{list-style: none; display:flex; flex-direction: column; gap: 8px}
.backups li{
  display:flex; gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--cream); border: 2px solid var(--ink);
  border-radius: 10px;
}
.backup-info{display:flex; flex-direction: column; flex: 1; min-width: 0}
.backup-info strong{font-size:.92rem}
.backup-info .mono{font-size:.75rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.backup-meta{display:flex; flex-direction: column; align-items: flex-end; font-size:.78rem; font-weight: 400}
.backup-size{color: var(--ink)}
.backup-time{color: var(--ink-2); font-size:.72rem}

/* BILLING */
.billing-card{
  background: var(--ink); color: var(--cream);
  border: 3px solid var(--ink); border-radius: var(--r-md);
  padding: 28px 32px;
  box-shadow: 8px 8px 0 var(--coral);
  display:flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
  margin-bottom: 28px;
}
.billing-card .dash-eyebrow{color: var(--cream-2); margin-bottom: 8px; display: block}
.billing-left{display: flex; flex-direction: column; gap: 6px; min-width: 260px}
.billing-left h3{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.6rem; line-height: 1.15; margin: 0;
}
.billing-left p{color: #d8c9b3; font-size:.92rem; margin: 0; line-height: 1.5}
.billing-actions{display:flex; gap: 10px; flex-wrap: wrap}
.billing-actions .btn{border-color: var(--cream)}

/* =================================================================
   LEGAL PAGES (terms + privacy)
================================================================= */
.legal{max-width: 1200px; margin: 30px auto 60px; padding: 0 20px}
.legal-grid{
  display:grid; grid-template-columns: 280px 1fr; gap: 40px;
  align-items: start;
}
.legal-toc{position: sticky; position: -webkit-sticky; top: 130px; align-self: start; z-index: 10}
.legal-toc-inner{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--shadow);
}
.legal-toc-label{
  font-size:.75rem; font-weight: 400;
  color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 12px;
}
.legal-toc ol{
  list-style: none; counter-reset: toc;
  display:flex; flex-direction: column; gap: 4px;
  margin-bottom: 18px;
}
.legal-toc li{counter-increment: toc; position: relative}
.legal-toc li a{
  display:block; padding: 8px 10px 8px 32px;
  border-radius: 8px; border: 2px solid transparent;
  text-decoration: none; color: var(--ink);
  font-weight: 400; font-size:.9rem;
  position: relative;
  transition: .15s ease;
}
.legal-toc li a::before{
  content: counter(toc);
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cream-2); border: 2px solid var(--ink);
  display:grid; place-items:center;
  font-family:'Fraunces',serif; font-size:.7rem; font-weight: 900;
}
.legal-toc li a:hover{background: var(--cream-2); border-color: var(--ink)}
.legal-toc li a:hover::before{background: var(--coral)}
.legal-toc li a.toc-active{background: var(--cream-2); border-color: var(--ink)}
.legal-toc li a.toc-active::before{background: var(--coral)}
.legal-toc-card{
  background: var(--lilac); border: 2.5px solid var(--ink);
  border-radius: var(--r-sm); padding: 14px;
  box-shadow: var(--shadow-sm);
  font-size:.85rem;
}
.legal-toc-card strong{display:block; margin-bottom: 4px; font-family:'Fraunces',serif; font-size: 1rem}

.legal-body{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: 40px;
  box-shadow: var(--shadow);
}
.legal-section{
  scroll-margin-top: 100px;
  padding: 26px 0;
  border-bottom: 2px dashed var(--ink);
}
.legal-section:first-child{padding-top: 0}
.legal-section:last-of-type{border-bottom: none}
.legal-section h2{
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 1.6rem; line-height: 1.1; letter-spacing: -.01em;
  margin-bottom: 14px;
}
.legal-section p{
  margin-bottom: 12px; font-size: 1rem;
  color: var(--ink); line-height: 1.65;
}
.legal-section p:last-child{margin-bottom: 0}
.legal-section strong{font-weight: 400}
.legal-section em{font-style: italic; font-weight: 400}
.legal-section code{
  font-family:'JetBrains Mono', monospace;
  background: var(--cream); border: 2px solid var(--ink);
  padding: 2px 6px; border-radius: 6px;
  font-size:.88em;
}
.legal-list{
  list-style: none; margin: 14px 0 14px 4px;
  display:flex; flex-direction: column; gap: 8px;
}
.legal-list li{
  position: relative; padding-left: 26px;
  font-size:.97rem; line-height: 1.55;
}
.legal-list li::before{
  content: ""; position: absolute; left: 0; top: 8px;
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--grass); border: 2px solid var(--ink);
  transform: rotate(-8deg);
}
.legal-callout{
  background: var(--cream-2); border: 2.5px dashed var(--ink);
  border-radius: var(--r-sm); padding: 18px 20px;
  margin-top: 14px;
}
.legal-callout strong{display:block; margin-bottom: 8px; font-family:'Fraunces',serif; font-size: 1.05rem}
.legal-callout ul{list-style: none; display:flex; flex-direction: column; gap: 6px}
.legal-callout li{
  position: relative; padding-left: 22px;
  font-size:.95rem; font-weight: 400;
}
.legal-callout li::before{
  content: "✓"; position: absolute; left: 0; top: 0;
  font-weight: 900; color: var(--grass-dk);
}
.legal-table{
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-top: 12px;
  border: 2.5px solid var(--ink); border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.legal-table th{
  background: var(--ink); color: var(--cream);
  text-align: left; padding: 10px 14px;
  font-weight: 400; font-size:.9rem;
}
.legal-table td{
  padding: 12px 14px; font-size:.92rem;
  border-top: 2px solid var(--ink);
  background: var(--cream);
}
.legal-table tr:nth-child(even) td{background: var(--paper)}
.legal-foot{
  margin-top: 32px; padding-top: 24px;
  border-top: 2px dashed var(--ink);
  display: flex; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 980px){
  .legal-grid{grid-template-columns: 1fr; gap: 24px}
  .legal-toc{position: static}
  .legal-body{padding: 28px 22px}
}

/* DASHBOARD RESPONSIVE */
@media (max-width: 980px){
  .dash{grid-template-columns: 1fr}
  .dash-side{position: static; flex-direction: column}
  .dash-stats{grid-template-columns: 1fr 1fr}
  .dash-two-col{grid-template-columns: 1fr}
  .server-main{grid-template-columns: auto 1fr; gap: 14px}
  .server-numbers{grid-column: 1 / -1; justify-content: flex-start}
  .auth-grid{grid-template-columns: 1fr}
}
@media (max-width: 520px){
  .auth-card{padding: 28px 22px}
  .dash-stats{grid-template-columns: 1fr}
  .server-main{grid-template-columns: 1fr}
  .server-ico{width: 50px; height: 50px}
  .user-name{display:none}
}

/* ====== CALCULATOR ====== */
.calc{max-width:1200px; margin: 30px auto 60px; padding: 0 20px}
.calc-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: start}
.calc-card{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow);
}
.calc-label{
  font-size: .75rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-2); margin-bottom: 18px;
}
.calc-field{margin-bottom: 22px}
.calc-field > label, .calc-row label{
  display:block; font-weight: 400; font-size: .95rem; margin-bottom: 10px;
}
.calc-row{display:flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px}
.calc-num{
  font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 900; color: var(--ink);
  background: var(--cream-2); border: 2.5px solid var(--ink); border-radius: 10px;
  padding: 2px 14px; min-width: 60px; text-align: center;
}
.calc-field input[type="range"]{
  -webkit-appearance: none; width: 100%; height: 10px; border-radius: 999px;
  background: var(--cream-2); border: 2.5px solid var(--ink); padding: 0;
}
.calc-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--coral); border: 3px solid var(--ink); cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.calc-field input[type="range"]::-moz-range-thumb{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--coral); border: 3px solid var(--ink); cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.calc-scale{
  display:flex; justify-content: space-between;
  font-size: .75rem; color: var(--ink-2); font-weight: 400; margin-top: 8px;
}
.calc-pills{display:flex; flex-wrap: wrap; gap: 8px}
.calc-pill{
  background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: 999px; padding: 9px 16px;
  font-family: 'Sniglet', sans-serif; font-weight: 400; font-size: .9rem;
  color: var(--ink); cursor: pointer; transition: .15s ease;
}
.calc-pill:hover{background: var(--cream-2); transform: translate(-1px,-1px); box-shadow: var(--shadow-sm)}
.calc-pill.active{background: var(--grass); box-shadow: var(--shadow-sm)}
.calc-check{display:flex; gap: 10px; align-items: flex-start; font-weight: 700; cursor: pointer}
.calc-check input{width: 20px; height: 20px; accent-color: var(--coral); margin-top: 2px}

.calc-result{
  background: linear-gradient(180deg, var(--cream-2), var(--peach));
  border: 3px solid var(--ink); border-radius: var(--r-md);
  padding: 32px 28px; box-shadow: var(--shadow); position: sticky; top: 110px;
}
.calc-result-eyebrow{
  font-size: .75rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-2); margin-bottom: 8px;
}
.calc-result-tier{
  font-family: 'Fraunces', serif; font-size: 2.2rem; font-weight: 900;
  color: var(--ink); margin-bottom: 6px;
}
.calc-result-blurb{color: var(--ink-2); font-size: .95rem; margin-bottom: 18px; min-height: 44px}
.calc-result-price{
  display:flex; align-items: baseline; gap: 8px; margin-bottom: 22px;
}
.calc-result-price span{
  font-family: 'Fraunces', serif; font-size: 3rem; font-weight: 900; color: var(--ink);
}
.calc-result-price small{
  font-family: 'Sniglet'; font-size: 1rem; font-weight: 400; color: var(--ink-2);
}
.calc-result-price em{
  font-style: normal; font-weight: 400; font-size: .85rem; color: var(--ink-2);
  margin-left: auto;
}
.calc-meter{margin-bottom: 22px}
.calc-meter-label{display:flex; justify-content: space-between; font-weight: 400; font-size: .9rem; margin-bottom: 6px}
.calc-meter-bar{
  height: 14px; background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: 999px; overflow: hidden;
}
.calc-meter-fill{
  height: 100%; background: linear-gradient(90deg, var(--grass), var(--coral));
  transition: width .25s ease;
}
.calc-meter-marks{
  display:flex; justify-content: space-between; margin-top: 6px;
  font-size: .7rem; color: var(--ink-2); font-weight: 400;
}
.calc-specs{list-style: none; margin-bottom: 22px; display:flex; flex-direction: column; gap: 6px}
.calc-specs li{
  position: relative; padding-left: 22px; font-size: .92rem; font-weight: 700;
}
.calc-specs li::before{
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--coral); font-weight: 900;
}
.calc-cta{width: 100%; justify-content: center; margin-bottom: 12px}
.calc-foot{text-align: center; font-size: .85rem; color: var(--ink-2)}

@media (max-width: 980px){
  .calc-grid{grid-template-columns: 1fr; gap: 22px}
  .calc-result{position: static}
}

/* ====== COMPARE ====== */
.cmp{max-width:1200px; margin: 30px auto 40px; padding: 0 20px}
.cmp-table-wrap{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); box-shadow: var(--shadow);
  overflow-x: auto;
}
.cmp-table{
  width: 100%; border-collapse: collapse; min-width: 720px;
}
.cmp-table thead th{
  padding: 18px 14px; text-align: left; vertical-align: middle;
  background: var(--cream-2); border-bottom: 3px solid var(--ink);
  font-family: 'Sniglet', sans-serif; font-weight: 400; font-size: .9rem;
}
.cmp-th-spec{width: 200px}
.cmp-host-pill{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 6px 14px; font-weight: 400; font-size: .9rem; color: var(--ink);
}
.cmp-pill-us{background: var(--grass); box-shadow: var(--shadow-sm)}
.cmp-table tbody td{
  padding: 16px 14px; border-bottom: 2px dashed rgba(46,31,61,.15);
  font-size: .92rem; vertical-align: top;
}
.cmp-table tbody tr:last-child td{border-bottom: none}
.cmp-spec{font-weight: 400; color: var(--ink-2); width: 200px}
.cmp-us{background: rgba(168,214,114,.18)}
.cmp-meta{color: var(--ink-2); font-size: .8rem}

.cmp-honest{max-width:1200px; margin: 0 auto 60px; padding: 0 20px}
.cmp-honest-card{
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: 32px 32px 28px;
}
.cmp-honest-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 0 24px;
}
.cmp-honest-col{
  background: var(--cream-2); border: 2.5px solid var(--ink);
  border-radius: var(--r-sm); padding: 22px; box-shadow: var(--shadow-sm);
}
.cmp-honest-col-alt{background: var(--sky)}
.cmp-honest-col h3{
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.25rem; margin-bottom: 12px;
}
.cmp-cta{display:flex; gap: 12px; flex-wrap: wrap}

@media (max-width: 720px){
  .cmp-honest-grid{grid-template-columns: 1fr}
  .cmp-honest-card{padding: 24px 22px}
}

/* ====== TRIAL BANNER ====== */
.trial-banner{
  display:none;
  background: linear-gradient(90deg, var(--grass), var(--peach));
  border: 3px solid var(--ink); border-radius: var(--r-sm);
  padding: 14px 18px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  font-weight: 400; font-size: .95rem;
}
.trial-banner.show{display:flex; align-items:center; gap:12px}
.trial-banner-icon{font-size: 1.3rem}
.trial-banner-text strong{display:block; font-family:'Fraunces',serif; font-size:1.05rem; margin-bottom: 2px}

/* ====== TRIAL HERO BADGE ====== */
.hero-trial{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grass); border: 2.5px solid var(--ink);
  border-radius: 999px; padding: 6px 14px;
  font-weight: 400; font-size: .85rem;
  box-shadow: var(--shadow-sm);
  margin-top: 8px; text-decoration: none; color: var(--ink);
  transition: .15s ease;
}
.hero-trial:hover{transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink)}

/* ====== AUTH MESSAGES ====== */
.auth-msg{min-height:18px; font-weight:400; font-size:.85rem; margin:4px 0 8px}
.auth-msg-err{color:#C9303A}
.auth-msg-ok{color:#3F8A37}

/* ====== VERIFY EMAIL BANNER (dashboard) ====== */
[hidden]{display:none !important}
.verify-banner{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(90deg, var(--peach), var(--pink));
  border: 3px solid var(--ink); border-radius: var(--r-md);
  padding: 14px 18px; margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.verify-banner-ok{background: linear-gradient(90deg, var(--grass), var(--sky))}
.verify-banner-icon{font-size: 1.6rem; flex-shrink: 0}
.verify-banner-text{flex:1; display:flex; flex-direction:column; gap:2px; font-size:.9rem; color: var(--ink); line-height: 1.4}
.verify-banner-text strong{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:900}
.verify-banner-text em{font-style: normal; font-weight: 400}
.verify-banner-btn{padding: 8px 16px !important; font-size: .85rem !important; flex-shrink: 0}
.verify-banner-close{
  background: transparent; border: 2.5px solid var(--ink); border-radius: 999px;
  width: 32px; height: 32px; cursor: pointer; font-weight: 400;
  flex-shrink: 0; display: grid; place-items: center;
}
.verify-banner-close:hover{background: rgba(46,31,61,.08)}
@media (max-width: 720px){
  .verify-banner{flex-direction:column; align-items:flex-start; gap:10px}
  .verify-banner-btn{width:100%}
}

/* Dashboard "back to site" pill */
.nav-back-site{
  margin-left: 12px;
  background: var(--cream-2);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px !important;
  font-size: .85rem !important;
  box-shadow: var(--shadow-sm);
}
.nav-back-site:hover{background: var(--peach) !important}

/* ====== DASHBOARD TAB SECTIONS ====== */
.dash-section{display:block}
.dash-explainer{
  color: var(--ink-2); font-size: .95rem;
  margin: -6px 0 18px; max-width: 720px;
}
.dash-explainer .mono{background: var(--cream-2); padding: 1px 8px; border-radius: 6px; border:2px solid var(--ink)}

/* ====== SERVERS: SPARKLINE + EXTRA NUM ====== */
.server-spark{
  display:flex; align-items:flex-end; gap:3px; height: 28px;
  margin-top: 8px; padding: 4px 8px;
  background: var(--cream-2); border:2.5px solid var(--ink);
  border-radius: 8px; box-shadow: var(--shadow-sm); width: fit-content;
}
.server-spark span{
  display:block; width:4px; background: var(--coral); border-radius: 2px;
}
.server-spark span:nth-child(1){height:60%}
.server-spark span:nth-child(2){height:75%}
.server-spark span:nth-child(3){height:90%}
.server-spark span:nth-child(4){height:80%}
.server-spark span:nth-child(5){height:95%}
.server-spark span:nth-child(6){height:70%}
.server-spark span:nth-child(7){height:85%}
.server-spark span:nth-child(8){height:90%}
.server-spark span:nth-child(9){height:78%}
.server-spark span:nth-child(10){height:92%}
.server-spark span:nth-child(11){height:88%}
.server-spark span:nth-child(12){height:95%}

/* ====== BACKUP GRID ====== */
.backup-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px; margin-bottom: 32px;
}
@media (max-width: 820px){ .backup-grid{grid-template-columns: 1fr} }
.backup-card{
  background: var(--cream); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 18px;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap: 12px;
}
.backup-card-top{display:flex; align-items:center; gap: 12px}
.backup-card-emoji{
  font-size: 1.6rem;
  background: var(--cream-2); border:2.5px solid var(--ink);
  border-radius: 12px; padding: 6px 10px;
}
.backup-card h4{font-family:'Fraunces',serif; margin:0; font-size:1.1rem}
.backup-card-when{color: var(--ink-2); font-size:.85rem; font-weight:700}
.backup-card-file{
  background: var(--cream-2); border:2px solid var(--ink);
  border-radius: 8px; padding: 6px 10px; font-size: .78rem;
  word-break: break-all;
}
.backup-card-actions{display:flex; gap: 10px; flex-wrap:wrap}

/* ====== BILLING ====== */
.billing-plan{
  background: linear-gradient(135deg, var(--peach,#FFD7B8), var(--pink,#F5A6C7));
  color: var(--ink);
}
.billing-plan .dash-eyebrow{color: var(--ink-2, var(--ink-soft, var(--ink)))}
.billing-plan .billing-left h3{color: var(--ink)}
.billing-plan .billing-left p{color: var(--ink-soft, var(--ink-2, var(--ink)))}
.invoice-empty{background: var(--cream-2); border: 2.5px dashed var(--ink); border-radius: 16px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-soft, var(--ink-2, var(--ink)))}
.invoice-empty-ico{font-size: 32px}
.invoice-empty p{margin: 0; font-size: .95rem}
.field-with-toggle{position: relative}
.field-with-toggle input{padding-right: 44px}
.pw-toggle{position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; padding: 6px 8px; line-height: 1; font-size: 18px; border-radius: 8px; transition: background .15s}
.pw-toggle:hover{background: rgba(0,0,0,.06)}
.pw-toggle:focus-visible{outline: 2px solid var(--ink); outline-offset: 2px}
.invoice-table-wrap{
  background: var(--cream); border: 3px solid var(--ink);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  overflow-x: auto; margin-bottom: 28px;
}
.invoice-table{width:100%; border-collapse: collapse; min-width: 560px}
.invoice-table th, .invoice-table td{
  padding: 14px 18px; text-align: left; font-size: .92rem;
  border-bottom: 2px solid var(--cream-2);
}
.invoice-table th{
  font-family: 'Sniglet', sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .75rem; color: var(--ink-2);
  background: var(--cream-2);
}
.invoice-table tr:last-child td{border-bottom: none}
.pill{
  display:inline-block; padding: 3px 10px; border-radius: 999px;
  border: 2px solid var(--ink); font-weight: 400; font-size: .75rem;
}
.pill-paid{background: var(--grass, #A8D8A8); color: var(--ink)}

/* ====== SETTINGS ====== */
.settings-card{
  background: var(--cream); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 24px;
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
  max-width: 720px;
  display:flex; flex-direction:column; gap: 14px;
}
.settings-card-head h3{
  font-family:'Fraunces',serif; margin: 0 0 4px; font-size: 1.3rem; font-weight: 900;
}
.settings-card-head p{margin: 0}
.settings-email-row{
  display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
  background: var(--cream-2); border:2.5px solid var(--ink);
  border-radius: 10px; padding: 10px 14px;
}
.settings-email{font-weight: 400}
.field-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px}
@media (max-width: 720px){ .field-grid{grid-template-columns: 1fr} }
.settings-danger{
  border-color: #C9303A; box-shadow: 6px 6px 0 #C9303A;
}
.settings-danger .settings-card-head h3{color: #C9303A}
.settings-danger-btn{
  background: #C9303A !important; color: #fff !important;
  border:2.5px solid var(--ink) !important;
  align-self: flex-start;
}
.settings-danger-btn:hover{transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink)}

/* Email-verified-state toggles */
.email-verified .email-unverified-only{display:none !important}
.email-unverified .email-verified-only{display:none !important}
body:not(.email-verified):not(.email-unverified) .email-verified-only,
body:not(.email-verified):not(.email-unverified) .email-unverified-only{display:none !important}

/* ====== COOKIE CONSENT POPUP ====== */
.cookie-popup{
  position: fixed; left: 18px; bottom: 18px; z-index: 9999;
  max-width: 460px; width: calc(100% - 36px);
  background: var(--cream);
  border: 3px solid var(--ink); border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  transform: translateY(140%); opacity: 0;
  transition: transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease;
}
.cookie-popup-in{transform: translateY(0); opacity: 1}
.cookie-popup-text{
  font-size: .92rem; line-height: 1.45; color: var(--ink);
}
.cookie-popup-text strong{
  display:block; font-family:'Fraunces',serif;
  font-size: 1.05rem; font-weight: 900; margin-bottom: 4px;
}
.cookie-popup-text a{
  color: var(--ink); font-weight: 400;
  text-decoration: underline; text-decoration-color: var(--coral);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.cookie-popup-actions{display:flex; gap: 10px; flex-wrap: wrap}
.cookie-btn{
  flex: 1; min-width: 120px;
  font-family: 'Sniglet', sans-serif; font-weight: 400;
  font-size: .9rem; cursor: pointer;
  border: 2.5px solid var(--ink); border-radius: 10px;
  padding: 9px 14px; box-shadow: var(--shadow-sm);
  color: var(--ink); transition: .15s ease;
}
.cookie-btn:hover{transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink)}
.cookie-btn-primary{background: var(--coral); color: var(--ink)}
.cookie-btn-secondary{background: var(--cream-2)}
@media (max-width: 520px){
  .cookie-popup{left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none}
}

/* ============================================================
   PRETTY PACK — site-wide polish
   Scroll reveals, shimmer headline, parallax blobs, card tilt,
   featured-plan halo, button press, nav scroll state, form focus
   underline, footer link underline.
   ============================================================ */

@property --halo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* 1. Scroll-reveal */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* 2. Hero word fade-up + shimmer on .wobble */
.hero h1 .word{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: heroWordIn .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--wi, 0) * 55ms);
}
@keyframes heroWordIn{
  to{ opacity: 1; transform: translateY(0); }
}
.hero h1 .wobble{
  color: var(--coral);
}

/* 3. Hero parallax blobs (JS injects .hero-blobs) */
.hero-blobs{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.hero-blobs::before, .hero-blobs::after,
.hero-blobs .blob{
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: .8;
  will-change: transform;
}
.hero-blobs .blob-1{ width: 520px; height: 520px; left: -8%; top: -6%;
  background: radial-gradient(circle, rgba(255,161,184,.55), transparent 65%); }
.hero-blobs .blob-2{ width: 620px; height: 620px; right: -10%; top: 4%;
  background: radial-gradient(circle, rgba(168,220,239,.6), transparent 65%); }
.hero-blobs .blob-3{ width: 560px; height: 560px; right: 8%; top: 58%;
  background: radial-gradient(circle, rgba(168,214,114,.45), transparent 65%); }
.hero-blobs .blob-4{ width: 540px; height: 540px; left: -4%; bottom: -8%;
  background: radial-gradient(circle, rgba(201,182,228,.5), transparent 65%); }
/* When parallax is active, suppress body's static radial layers */
body.has-blobs{ background-image: none; }

/* 4. Card 3D tilt */
@media (min-width: 901px){
  .tier, .nav-card, .plugin-card, .event-card, .dash-stat{
    transform-style: preserve-3d;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .tier.is-tilt, .nav-card.is-tilt, .plugin-card.is-tilt,
  .event-card.is-tilt, .dash-stat.is-tilt{
    transform:
      perspective(900px)
      rotateX(var(--ry, 0deg))
      rotateY(var(--rx, 0deg))
      translate(-3px,-3px);
  }
}

/* 5. Featured-plan animated halo (Bloom tier) */
.tier.featured{ position: relative; isolation: isolate; }
.tier.featured::before{
  content: "";
  position: absolute; inset: -10px;
  z-index: -1; border-radius: calc(var(--r-lg) + 8px);
  background: conic-gradient(from var(--halo-angle),
    var(--coral), var(--pink), var(--lilac), var(--sky), var(--coral));
  filter: blur(14px); opacity: .55;
  animation: haloSpin 9s linear infinite;
}
@keyframes haloSpin{
  to{ --halo-angle: 360deg; }
}

/* 6. Button press + idle pulse */
.btn{ transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:active{ transform: translate(0,0) scale(.97) !important; transition: transform .08s ease; }
.hero .btn-primary{ animation: ctaPulse 3.4s ease-in-out infinite; }
@keyframes ctaPulse{
  0%, 100%{ transform: translate(0,0) scale(1); box-shadow: var(--shadow); }
  50%     { transform: translate(-1px,-1px) scale(1.025); box-shadow: 8px 8px 0 var(--ink); }
}

/* 7. Nav scroll state */
nav .nav-inner{ transition: padding .25s ease, box-shadow .25s ease, background .25s ease, backdrop-filter .25s ease; }
nav.scrolled .nav-inner{
  padding: 8px 18px 8px 22px;
  background: rgba(255, 251, 242, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 4px 4px 0 var(--ink), 0 8px 24px rgba(46,31,61,.12);
}

/* 8. Form-input focus underline — removed (kept original .field input:focus shadow) */

/* Contact pages — pills, textarea, honeypot, per-page accents */
.contact-pill{
  display:inline-block; padding: 5px 12px;
  background: var(--sky); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 999px;
  font-size: .78rem; font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
.contact-pill-quote   { background: var(--peach); }
.contact-pill-faq     { background: var(--lilac); }
.contact-pill-privacy { background: var(--grass); }
.contact-pill-terms   { background: var(--pink); }
.contact-pill-general { background: var(--sky); }

.contact-textarea{
  resize: vertical; min-height: 140px;
  font-family: 'Sniglet', sans-serif;
  padding: 14px 16px;
  border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font-size: 1rem; box-shadow: var(--shadow-sm);
  outline: none; transition: transform .12s ease, box-shadow .12s ease;
  width: 100%;
}
.contact-textarea:focus{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }

.hp-trap{
  position: absolute !important;
  left: -9999px !important; top: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none;
}

/* Structured contact fields */
.field select, .field input[type="date"]{
  font-family: 'Sniglet', sans-serif; font-size: 1rem;
  padding: 12px 14px;
  border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-sm);
  outline: none; transition: transform .12s ease, box-shadow .12s ease;
  width: 100%;
  appearance: none; -webkit-appearance: none;
}
.field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%232E1F3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field select:focus, .field input[type="date"]:focus{
  transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink);
}
.field-grid-2{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 720px){
  .field-grid-2{ grid-template-columns: 1fr; gap: 10px; }
}
.optional{ color: var(--ink-2); font-weight: 600; font-size: .85em; }
.calc-scale{
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--ink-2); font-weight: 700;
  margin-top: 4px;
}

/* Dashboard nav admin link — owner-only, revealed by body.is-admin.
   Inherits the same flat look as the other nav-links — no special styling. */
body.is-admin .nav-admin[hidden]{ display: inline-block !important; }
body:not(.is-admin) .dash-section[data-tab="admin"]{ display: none !important; }

/* Admin tab styles (scoped inside the admin dashboard section) */
.dash-section[data-tab="admin"] .admin-header{
  display: flex; justify-content: space-between; align-items: end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.dash-section[data-tab="admin"] .admin-pill{
  display: inline-block; padding: 4px 12px;
  background: var(--coral); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 999px;
  font-size: .78rem; font-weight: 900; text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink); margin-bottom: 8px;
}
.dash-section[data-tab="admin"] .admin-stats{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 26px;
}
@media (max-width: 900px){ .dash-section[data-tab="admin"] .admin-stats{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .dash-section[data-tab="admin"] .admin-stats{ grid-template-columns: 1fr; } }
.dash-section[data-tab="admin"] .admin-stat{
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow-sm); padding: 18px;
}
.dash-section[data-tab="admin"] .admin-stat-n{
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 2rem; line-height: 1;
}
.dash-section[data-tab="admin"] .admin-stat-l{
  font-size: .85rem; color: var(--ink-2); font-weight: 400; margin-top: 6px;
}
.dash-section[data-tab="admin"] .admin-table-wrap{
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow); overflow: auto;
}
.dash-section[data-tab="admin"] .admin-table{ width: 100%; border-collapse: collapse; font-size: .92rem; }
.dash-section[data-tab="admin"] .admin-table th,
.dash-section[data-tab="admin"] .admin-table td{ text-align: left; padding: 12px 14px; vertical-align: top; }
.dash-section[data-tab="admin"] .admin-table thead th{
  background: var(--cream-2); border-bottom: 2.5px solid var(--ink); font-weight: 400;
}
.dash-section[data-tab="admin"] .admin-table tbody tr{ border-top: 1.5px dashed rgba(46,31,61,.2); }
.dash-section[data-tab="admin"] .admin-table tbody tr:first-child{ border-top: none; }
.dash-section[data-tab="admin"] .badge{
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 2px solid var(--ink); font-size: .72rem; font-weight: 400;
}
.dash-section[data-tab="admin"] .badge-yes{ background: var(--grass); }
.dash-section[data-tab="admin"] .badge-no{ background: var(--cream-2); color: var(--ink-2); }
.dash-section[data-tab="admin"] .badge-admin{ background: var(--coral); }
.dash-section[data-tab="admin"] .row-actions{ display: flex; gap: 6px; flex-wrap: wrap; }
.dash-section[data-tab="admin"] .row-actions button{
  font-family: 'Sniglet', sans-serif; font-weight: 400; font-size: .8rem;
  padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--cream); cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dash-section[data-tab="admin"] .row-actions button:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.dash-section[data-tab="admin"] .row-actions .danger{ background: var(--pink); }
.dash-section[data-tab="admin"] .row-actions button:disabled{ opacity: .5; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--ink); }
.dash-section[data-tab="admin"] .admin-empty{ padding: 30px; text-align: center; color: var(--ink-2); font-weight: 700; }

/* Admin sub-nav pills */
.admin-subnav{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
}
.admin-sub-pill{
  display: inline-block;
  padding: 8px 14px;
  border: 2.5px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-weight: 400; font-size: .92rem; text-decoration: none;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.admin-sub-pill:hover{ background: var(--cream-2); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.admin-sub-pill.active{ background: var(--coral); box-shadow: 3px 3px 0 var(--ink); }

/* Admin feed list (activity, contact) */
.admin-feed{
  list-style: none; margin: 0; padding: 0;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.admin-feed > li{
  padding: 14px 18px;
  border-top: 1.5px dashed rgba(46,31,61,.18);
  cursor: default;
}
.admin-feed > li:first-child{ border-top: none; }
.admin-feed > li.admin-empty{ text-align: center; color: var(--ink-2); font-weight: 700; padding: 30px; border-top: none; }
.admin-feed-head{ display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.admin-feed-head strong{ font-size: .98rem; }
.admin-feed-time{ color: var(--ink-2); font-size: .8rem; font-weight: 700; }
.admin-feed-sub{ color: var(--ink-2); font-size: .88rem; margin-top: 4px; }
.admin-feed-expand{
  margin-top: 10px; padding: 12px 14px;
  background: var(--cream); border: 2px dashed var(--ink); border-radius: 12px;
  font-size: .9rem; line-height: 1.5; white-space: pre-wrap;
  display: none;
}
.admin-feed > li.is-open .admin-feed-expand{ display: block; }
.admin-feed > li.expandable{ cursor: pointer; }
.admin-feed > li.expandable:hover{ background: var(--cream-2); }

/* Admin toolbar row (filters above lists) */
.admin-toolbar{
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px; font-weight: 700;
}
.admin-toolbar select{
  font-family: 'Sniglet', sans-serif; font-weight: 400; font-size: .95rem;
  padding: 8px 32px 8px 14px;
  border: 2.5px solid var(--ink); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%232E1F3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Maintenance banner (site-wide, shown by js/main.js when set) */
.maintenance-banner{
  position: relative; z-index: 100;
  background: var(--coral); color: var(--ink);
  border-bottom: 3px solid var(--ink);
  text-align: center; padding: 10px 16px;
  font-weight: 400; font-size: .92rem;
}

/* Subtle per-page header accent stripe */
.contact-page{ position: relative; overflow: hidden; }
.contact-page::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--sky);
}
.contact-page-quote::before   { background: linear-gradient(90deg, var(--coral), var(--peach)); }
.contact-page-faq::before     { background: linear-gradient(90deg, var(--lilac), var(--sky)); }
.contact-page-privacy::before { background: linear-gradient(90deg, var(--grass), var(--grass-dk)); }
.contact-page-terms::before   { background: linear-gradient(90deg, var(--pink), var(--coral)); }

/* 9. Tier-icon hover glow */
.tier:hover .tier-icon{ box-shadow: 0 0 24px rgba(255,131,100,.55); transition: box-shadow .3s ease; }
.tier:nth-child(2):hover .tier-icon{ box-shadow: 0 0 24px rgba(255,161,184,.6); }
.tier:nth-child(3):hover .tier-icon{ box-shadow: 0 0 24px rgba(201,182,228,.6); }
.tier:nth-child(4):hover .tier-icon{ box-shadow: 0 0 24px rgba(168,214,114,.6); }

/* 10. Footer link underline-slide */
footer a{ position: relative; transition: color .15s ease; }
footer a:not(.brand)::after{
  content: "";
  position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: var(--coral);
  border-radius: 1px;
  transition: width .22s ease;
}
footer a:not(.brand):hover::after{ width: 100%; }

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 .word{ opacity: 1; transform: none; animation: none; }
  .hero h1 .wobble{ animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--coral); }
  .hero .btn-primary{ animation: none; }
  .tier.featured::before{ animation: none; }
  .hero-blobs .blob{ animation: none; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Anchor weight overrides — Sniglet ships 400/800 only, so we keep the
   "between" feel by lightening most of the UI to 400 (above) while these
   visual anchors stay at 800 so buttons / prices / brand still pop. */
.btn, .btn-primary, .btn-secondary,
.tier-name, .tier-price, .tier-price small,
.dash-stat-num, .calc-num, .admin-stat-n,
.brand, .hero h1, .nav-cta,
.contact-pill, .tier-ribbon, .admin-pill,
.dash-link-badge, .badge{
  font-weight: 800;
}

/* === Contact-form file input + preview === */
.file-input{
  font-family: 'Sniglet', sans-serif; font-size: .95rem;
  padding: 10px 14px;
  border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer; width: 100%;
}
.file-input::-webkit-file-upload-button,
.file-input::file-selector-button{
  font-family: 'Sniglet', sans-serif; font-weight: 800; font-size: .9rem;
  margin-right: 12px; padding: 6px 12px;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--cream-2); color: var(--ink); cursor: pointer;
}
.attachment-preview{
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.attachment-preview:empty{ display: none; }
.attachment-preview li{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 999px;
  font-size: .9rem; font-weight: 400;
}
.attachment-preview .att-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview .att-size{ color: var(--ink-2); font-size: .82rem; }
.attachment-preview .att-remove{
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--pink); cursor: pointer;
  font-weight: 800; font-size: .85rem; padding: 0;
}

/* Admin contact attachments */
.admin-attachments{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.admin-att{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 2px solid var(--ink); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  text-decoration: none; font-weight: 800; font-size: .85rem;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.admin-att:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.admin-att-img{ padding: 0; overflow: hidden; }
.admin-att-img img{ display: block; width: 120px; height: 90px; object-fit: cover; }
.admin-att .att-size{ color: var(--ink-2); font-weight: 700; }

/* === Custom file picker (locale-proof) === */
.file-picker{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.file-picker-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--coral); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 999px;
  font-family: 'Sniglet', sans-serif; font-weight: 800; font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.file-picker-btn:hover, .file-picker-btn:focus-visible{
  background: var(--peach);
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 var(--ink);
  outline: none;
}
.file-picker-btn:active{
  transform: translate(0,0) scale(.98);
  box-shadow: 2px 2px 0 var(--ink);
}
.file-picker-status{ font-size: .82rem; color: var(--ink-2); font-weight: 400; }
.file-input-hidden{
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Social links in footer that have no URL configured yet — visible but muted. */
[data-social-empty]{
  opacity: .55;
  cursor: help;
  font-style: italic;
}
[data-social-empty]:hover{ opacity: .85; }

/* ====== PIXEL BLOCK ICONS + ACCENT FONT ====== */
.block-ico{display:inline-block; width:48px; height:48px; image-rendering: pixelated; image-rendering: crisp-edges; vertical-align:middle}
.block-ico.sm{width:32px; height:32px}
.block-ico.lg{width:96px; height:96px}
.pixel{font-family:'VT323', 'Courier New', monospace; letter-spacing:.04em; font-weight:400}

/* Hero live-status pill */
.hero-status{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); border:2.5px solid var(--ink);
  padding: 6px 14px; border-radius: 999px;
  font-size:.85rem; text-decoration:none; color:var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 16px;
}
.hero-status:hover{transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink)}
.hero-status .dot{width:9px; height:9px; border-radius:50%; background:#bbb}
.hero-status.ok .dot{background:#2d7a2d; box-shadow: 0 0 0 3px rgba(45,122,45,.18)}
.hero-status.warn .dot{background:#b56b00}
.hero-status.err .dot{background:#8a2820}

/* Hero secondary link (small text link under the primary CTA) */
.hero-secondary{display:inline-block; margin-top:14px; color:var(--ink-2); text-decoration:none; font-size:.95rem; border-bottom:1.5px dashed var(--ink-2); padding-bottom:1px}
.hero-secondary:hover{color:var(--ink); border-bottom-color: var(--ink)}

/* Two intent cards (replaces the 6-card bento) */
.intent-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 20px}
.intent-card{
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px;
  padding: 28px; box-shadow: 6px 6px 0 var(--ink);
  text-decoration:none; color: var(--ink);
  display:flex; flex-direction:column; gap:10px;
  transition: transform .15s, box-shadow .15s;
}
.intent-card:hover{transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink)}
.intent-card .block-ico{margin-bottom:6px}
.intent-card h3{font-family:'Fraunces',serif; font-weight:900; font-size:1.55rem; margin:0; line-height:1.1}
.intent-card p{color: var(--ink-2); margin:0; font-size:.98rem}
.intent-card .arrow{margin-top:8px; font-weight:800}
@media (max-width: 720px){ .intent-grid{grid-template-columns:1fr} }

/* Pre-footer waitlist callout */
.waitlist-strip{
  max-width:1200px; margin: 48px auto 0; padding: 0 20px;
}
.waitlist-strip .waitlist-card{margin: 0; max-width:none}

/* Floating pixel blocks around the mascot */
.mascot-wrap{ position: relative; }
.floaty-block{ position: absolute; pointer-events: none; animation: blockBob 6s ease-in-out infinite; z-index: 2; }
.floaty-block svg{ display: block; width: 100%; height: auto; filter: drop-shadow(3px 3px 0 var(--ink)); image-rendering: pixelated; }
.floaty-block-1{ top: 4%;   left: 2%;  width: 56px; animation-delay: 0s; }
.floaty-block-1 svg{ transform: rotate(-12deg); }
.floaty-block-2{ top: 14%;  right: 4%; width: 48px; animation-delay: 1.4s; }
.floaty-block-2 svg{ transform: rotate(10deg); }
.floaty-block-3{ bottom: 18%; left: 8%; width: 64px; animation-delay: 2.8s; }
.floaty-block-3 svg{ transform: rotate(-6deg); }
@keyframes blockBob{ 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce){ .floaty-block{ animation: none; } }
@media (max-width: 720px){
  .floaty-block-1{ width: 40px; }
  .floaty-block-2{ width: 36px; }
  .floaty-block-3{ width: 44px; }
}