/* Nostalgia skin for the portal's sub-pages (register, download, guide,
   reset, delete, 404). Every sub-page template is wrapped in
   <section class="page">, so all of these rules are scoped to .page and
   cannot disturb the landing page, which shares .panel/.steps/.wrap names
   with a different meaning. Loaded after style.css, so its :root tokens
   (--ink, --muted, --gold, --blue, --paper, --line, --back) are available. */

:root{
  --ink-soft:#53616b;
  --royal-deep:#234f70;
  --display:"Segoe UI",Tahoma,sans-serif;
}

.page{padding:32px 0 48px}
.page .wrap.narrow{width:min(760px,calc(100% - 40px))}

/* ---------------------------------------------------------- page heading */
.page__head{text-align:center;margin-bottom:24px}
.page__title{
  margin:0;font-family:Georgia,serif;font-weight:700;color:var(--royal-deep);
  font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);letter-spacing:.01em;
  text-shadow:0 2px 0 #fff,0 3px 8px #2a55701a;
}
.page__lead{margin:10px auto 0;max-width:62ch;color:var(--ink-soft);font-size:1.02rem}

.section__head{text-align:center;margin:34px 0 16px}
.section__title{margin:0;font-family:var(--display);font-weight:900;color:var(--royal-deep);font-size:1.4rem}

/* ------------------------------------------------------------------ cards */
.page .panel{
  overflow:visible;border:2px solid #bd9349;border-radius:11px;
  background:linear-gradient(115deg,#fffcf0,#fff4dc);padding:24px;
  box-shadow:inset 0 0 0 2px #fff3bc,0 2px 0 #fff9df,0 5px 15px #47688122;
}
.page .panel + .panel{margin-top:22px}
.panel__title{
  margin:0 0 9px;padding:0;font-family:Georgia,serif;font-weight:700;
  color:var(--royal-deep);font-size:1.25rem;background:none;border:0;
  box-shadow:none;text-shadow:none;
}
.page .panel h2.panel__title{padding:0;background:none;border:0;box-shadow:none;text-shadow:none;color:var(--royal-deep)}
.page .panel p{color:var(--ink-soft)}
.page .panel > :last-child{margin-bottom:0}

.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:1fr 1fr}
@media(max-width:800px){.grid--2{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ forms */
.page .form{display:block}
.field{margin-bottom:18px}
.field label{display:block;font-weight:800;color:var(--royal-deep);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;
  border:1px solid #bda16b;border-radius:6px;background:#fffef9;
  color:var(--ink);font:inherit;
  box-shadow:inset 0 2px 3px #9b783310;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:1px;border-color:var(--blue);
}
.field input:invalid:not(:placeholder-shown){border-color:#c2606a}
.hint{margin:7px 0 0;font-size:.88rem;color:var(--ink-soft);line-height:1.5}

.check{display:flex;gap:11px;align-items:flex-start;margin:0 0 18px;color:var(--ink-soft);font-size:.93rem}
.check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--blue)}

.cf-turnstile{margin:0 0 16px}

/* ---------------------------------------------------------------- buttons */
.page .btn{
  display:inline-block;padding:11px 22px;border-radius:9px;cursor:pointer;
  border:2px solid #c79d4d;background:linear-gradient(#4aa5d6,#277eaf 45%,#185c91 50%,#154e80);
  color:#fff0bf;font:inherit;font-weight:800;text-align:center;
  text-decoration:none;text-shadow:0 1px #18314a;
  box-shadow:inset 0 0 0 1px #fff4c577,0 2px 0 #89703d,0 3px 10px #2a557022;
  transition:filter .18s,transform .18s;
}
.page .btn:hover{filter:brightness(1.09)}
.page .btn:active{transform:translateY(1px);box-shadow:0 1px 0 #14334f}
.page .btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.page .btn--block{display:block;width:100%}
.page .btn--lg{padding:14px 26px;font-size:1.05rem}
.page .btn--sm{padding:7px 13px;font-size:.86rem;border-radius:7px}
.page .btn--ghost{
  background:linear-gradient(#fffbee,#f7e8bf);color:var(--royal-deep);border:1px solid #bda16b;
  text-shadow:none;box-shadow:inset 0 1px white,0 2px 0 #cdb785;
}
.page .btn--ghost:hover{background:#ffedb9}
.page .btn--royal{
  background:linear-gradient(#ffedb0,#d7a955 55%,#ffe5a3);
  color:#4a3310;border-color:#b28a3f;text-shadow:0 1px #ffeab8;
  box-shadow:0 2px 0 #9b7733,0 3px 10px #2a557022;
}
.hero__cta{margin-top:26px;text-align:center;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --------------------------------------------------------------- messages */
.alert{margin:0 0 20px;padding:13px 16px;border-radius:9px;border:1px solid var(--line);font-weight:600}
.alert-ok{background:#e8f8ee;border-color:#9ed5b4;color:#1d6c42}
.alert-bad{background:#fdecec;border-color:#e2a7a7;color:#9c2b2b}
.alert-info{background:#eaf4fd;border-color:#a9cdea;color:#1c5080}

.callout{
  display:flex;gap:13px;align-items:flex-start;flex-wrap:wrap;
  padding:16px 18px;border-radius:11px;
  background:#fff7df;border:1px solid var(--line);color:var(--ink-soft);
}
.callout strong{color:var(--royal-deep)}
.callout .hint{flex:1 1 100%;margin-top:4px}

/* ------------------------------------------------------------------ steps */
.page .steps{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:step}
.page .steps li{
  position:relative;counter-increment:step;
  padding:0 0 0 46px;margin-bottom:18px;color:var(--ink-soft);
}
.page .steps li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(#3b799f,#193c61);color:#fff0bf;font-weight:900;
  box-shadow:0 2px 0 #14334f;
}
.page .steps li > h3,.page .steps li > strong{
  display:block;margin:4px 0 4px;color:var(--royal-deep);font-size:1.02rem;
}
.page .steps li:last-child{margin-bottom:0}

/* -------------------------------------------------------------------- faq */
.faq{
  border:1px solid var(--line);border-radius:10px;background:var(--paper);
  padding:0;margin-bottom:11px;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:14px 17px;font-weight:800;color:var(--royal-deep);
  list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.25rem;line-height:1;color:var(--blue)}
.faq[open] summary::after{content:"\2212"}
.faq summary:hover{background:#fff0c9}
.faq summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.faq > :not(summary){padding:0 17px 15px;margin:0;color:var(--ink-soft)}

/* ------------------------------------------------------------------- code */
.page code{
  background:#f9edd0;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:.9em;color:var(--royal-deep);
  overflow-wrap:anywhere;
}
.copyrow{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:12px 0 0;padding:11px 13px;border-radius:9px;
  background:#f9edd0;border:1px solid var(--line);
}
.copyrow code{background:none;border:0;padding:0;flex:1 1 260px}
.hash{display:block;padding:11px 13px;border-radius:8px;word-break:break-all;line-height:1.6}

/* ----------------------------------------------------- shared site footer */
/* Overrides the flex row in style.css so the landing page and the sub-pages
   share one footer treatment. */
:root{--ok:#1d7a46;--bad:#a33}

footer.wrap{
  display:block;text-align:center;padding-block:24px;margin-top:12px;
  border-top:1px solid var(--line);color:var(--muted);
}
footer.wrap p{margin:7px 0;flex:none;order:0;font-size:13px}
footer.wrap p:last-of-type{font-size:12px;opacity:.85;max-width:70ch;margin-inline:auto}
footer.wrap > a{display:inline-block;margin-top:10px;order:0;white-space:nowrap;font-weight:700}
footer.wrap code{
  background:#f9edd0;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:.93em;color:var(--royal-deep);
}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:13px 0}
.footer-links a{white-space:nowrap;font-weight:600}
@media(max-width:600px){.page{padding-top:25px}.page .panel{padding:19px 16px}.page__head{margin-bottom:20px}.page .steps{display:block}.page .steps li{padding-left:42px}.page .wrap.narrow{width:calc(100% - 24px)}}