@font-face{font-family:Source;src:url(assets/fonts/SourceSans3.ttf)}

/* arnés Control Center — landing and help

   Built on the approved Atomic 22 landing system: #0c131d ground, #78b6ff
   accent, Source Sans 3, 1320px/90% measure, 760px breakpoint, publisher
   branding, and the explanation / walkthrough / practical / download
   sequence.

   This page's layout is the console: a two-row header, a split hero, a
   full-width panorama, a module rail on the right, boxed walkthrough cards
   and a centred close. Layout is what separates it from the other apps. */

*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:#0c131d;color:#edf2fa;font:18px/1.6 Source,sans-serif;--accent:#78b6ff;--muted:#b0bed0;--rule:#2c394a;--panel:#111d2b;--panel-line:#334258}
a{color:var(--accent);text-underline-offset:5px}
a:hover{color:#fff}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
::selection{background:#3466a1;color:#fff}

.skip{position:absolute;left:10px;top:-80px}
.skip:focus{top:10px}

h1,h2,h3{line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.8rem,6vw,5.4rem);letter-spacing:-.035em;margin:0 0 24px}
h2{font-size:clamp(1.9rem,3.4vw,3.2rem);letter-spacing:-.025em}
h3{font-size:1.5rem;line-height:1.35}
p{max-width:70ch}
.lead{font-size:1.3rem;color:#c5d0df;max-width:65ch}
section{padding:52px 0}

/* ---- two-row header: publisher above, navigation below --------- */
header,main,footer{width:min(1320px,90%);margin:auto}
header{display:flex;flex-direction:column;gap:16px;padding:26px 0 0;border-bottom:1px solid var(--rule)}
header a{text-decoration:none}
header .publisher{color:#e5edf8;font-weight:650;letter-spacing:.01em}
header nav{display:flex;justify-content:flex-end;gap:30px;flex-wrap:wrap;padding-bottom:20px;font-size:.98rem}
header nav a{color:#aebccd}
header nav a:hover{color:#fff}
header .brand{width:220px;max-height:85px;object-fit:contain}

.brandline{display:flex;align-items:center;gap:20px;margin:52px 0 16px}
.brandline .icon{width:64px;height:64px;object-fit:contain}
.wordmark{width:260px;max-height:105px;object-fit:contain;object-position:left center}

/* ---- split hero: headline left, lede right --------------------- */
.hero{display:grid;grid-template-columns:1.35fr .85fr;gap:60px;align-items:end;padding-top:18px}
.hero h1{margin:0}
.hero .lead{margin:0 0 6px;padding-left:32px;border-left:2px solid var(--panel-line)}

/* ---- full-width panorama --------------------------------------- */
.stage{border:1px solid var(--panel-line);border-radius:12px;overflow:hidden;background:var(--panel)}
.stage .panorama{width:100%;display:block}
.stage-body{padding:18px 26px 22px;font-size:.94rem;color:var(--muted);border-top:1px solid var(--panel-line)}

/* ---- modules: copy left, rail right ---------------------------- */
.modules{display:grid;grid-template-columns:1fr 320px;gap:56px;margin:64px 0 0;border-top:1px solid var(--panel-line);padding-top:52px}
.modules>div:first-child h2{margin:0 0 18px}
.modules>div:first-child p{margin-bottom:22px}
.module-buttons{display:flex;flex-direction:column}
.module-buttons button{display:block;width:100%;text-align:left;background:transparent;color:#bdcce0;border:1px solid var(--panel-line);border-radius:7px;padding:16px 20px;margin-bottom:10px}
.module-buttons button[aria-pressed=true]{color:#091321;background:var(--accent);border-color:var(--accent);font-weight:650}

/* ---- explanation: boxed walkthrough cards ---------------------- */
.explanation{border-top:1px solid var(--panel-line);padding:70px 0}
.explanation-intro{max-width:900px}
.explanation h2{margin-top:0}
.walkthrough{counter-reset:walk;list-style:none;padding:0;margin:48px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.walkthrough li{counter-increment:walk;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:30px 28px 34px}
.walkthrough li:before{content:'Step ' counter(walk,decimal-leading-zero);display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#80b8f5;margin-bottom:14px}
.walkthrough h3{margin:0 0 12px}
.walkthrough p{margin:0;color:#c2cfe0;font-size:.98rem}
.practical{max-width:900px;padding-top:25px}
.practical h3{margin-top:28px}
.practical p{color:#c2cfe0}

/* ---- download: centred ----------------------------------------- */
.download{border-top:1px solid var(--panel-line);padding:64px 0 20px;text-align:center}
.download h2{margin-bottom:26px}
.download .actions{justify-content:center}
.status,figcaption,.caption{font-size:.94rem;color:var(--muted)}
.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:26px 0}
.button{display:inline-block;padding:13px 24px;background:var(--accent);color:#091321;border:1px solid transparent;border-radius:7px;font-weight:650;text-decoration:none;font-size:1.05rem}
.button:hover{background:#bedcff;color:#091321}
.resources{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:22px}

footer{border-top:1px solid var(--panel-line);padding:34px 0 52px;color:var(--muted);display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;font-size:.94rem}
footer .resources{margin-top:0;justify-content:flex-start}

/* ---- help page ------------------------------------------------- */
.help{max-width:880px}
.help>h1{margin-top:50px}
.help>nav{margin-bottom:35px}
.help section{padding:24px 0}
.help li{margin:12px 0}
.help p{max-width:70ch}

figure{margin:0}
img{max-width:100%;height:auto}

/* ---- 760px ------------------------------------------------------ */
@media(max-width:760px){
  header{gap:12px}
  header nav{justify-content:flex-start;gap:20px;padding-bottom:18px}
  .brandline{margin:36px 0 12px}
  .wordmark{max-width:65vw}
  section{padding:34px 0}
  h1{font-size:2.9rem}
  .hero{grid-template-columns:1fr;gap:24px}
  .hero .lead{padding-left:0;border-left:0}
  .walkthrough{grid-template-columns:1fr;gap:16px;margin:34px 0}
  .modules{grid-template-columns:1fr;gap:24px;margin-top:44px}
  .explanation,.download{padding:44px 0}
  .practical{max-width:none}
  footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}