/* HOPPP! — Bureau design system core
   Shared across all pages. Landing adds page-specific CSS inline after this. */
:root{
  --paper:#e9e1cf; --card:#f3eddd; --cardalt:#f5f0e2;
  --ink:#262019; --inksoft:rgba(38,32,25,0.62); --inkfaint:rgba(38,32,25,0.4);
  --line:rgba(38,32,25,0.2);
  --slate:#3f5a70; --slatedk:#2f4658; --slatelt:#dde3e8;
  --oxblood:#9c4230; --oxbloodlt:#ecd9d0;
  --olive:#5c7142; --ochre:#bd8838; --white:#fbf8f0;
  --d:'Archivo','Arial Narrow',sans-serif;
  --ser:'Newsreader',Georgia,serif;
  --m:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--d);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* paper grain + fibre */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:multiply;
  background-image:
    radial-gradient(rgba(38,32,25,0.05) 1px,transparent 1px),
    radial-gradient(rgba(38,32,25,0.04) 1px,transparent 1px);
  background-size:3px 3px,7px 7px;background-position:0 0,1px 2px;
}
.mono{font-family:var(--m)}
.ser{font-family:var(--ser)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--oxblood)}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
.wrap-sm{max-width:820px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
.label{font-family:var(--m);font-size:11px;letter-spacing:2px;color:var(--inkfaint);text-transform:uppercase}

/* hard-edged card */
.card{background:var(--card);border:2px solid var(--ink);border-radius:2px;box-shadow:6px 6px 0 var(--ink)}
.card.s{box-shadow:4px 4px 0 var(--ink)}

.stamp{
  display:inline-block;border:2.5px solid var(--oxblood);color:var(--oxblood);
  padding:6px 14px;font-family:var(--m);font-weight:700;font-size:15px;letter-spacing:2px;
  border-radius:3px;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px var(--oxblood);
}
.stamp.olive{border-color:var(--olive);color:var(--olive);box-shadow:inset 0 0 0 1.5px var(--olive)}
.stamp.slate{border-color:var(--slate);color:var(--slate);box-shadow:inset 0 0 0 1.5px var(--slate)}

.btn{
  font-family:var(--m);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--ink);color:var(--white);border:none;border-radius:2px;padding:15px 24px;cursor:pointer;
  box-shadow:5px 5px 0 var(--oxblood);transition:transform .08s ease,box-shadow .08s ease;
  display:inline-flex;align-items:center;gap:10px;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--oxblood)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--oxblood)}
.btn.outline{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.outline:hover{box-shadow:6px 6px 0 var(--ink)}
.btn.outline:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.lg{font-size:14px;padding:18px 30px}

/* ---- nav ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:40;backdrop-filter:blur(2px);transition:background .25s,border-color .25s}
nav.scrolled{background:rgba(233,225,207,0.86);border-bottom:2px solid var(--ink)}
.navin{max-width:1180px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between}
.navin a.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.word{font-family:var(--d);font-weight:900;font-size:24px;letter-spacing:-1px}
.word b{color:var(--oxblood)}
.appicon{width:30px;height:30px;display:block;border-radius:3px}
.appiconlg{width:46px;height:46px;display:block;border-radius:4px}
.navmeta{font-family:var(--m);font-size:11px;letter-spacing:1.5px;color:var(--inkfaint);display:flex;gap:18px;align-items:center}
.navbtn{font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;background:var(--ink);color:var(--white);border:none;border-radius:2px;padding:9px 16px;cursor:pointer;box-shadow:3px 3px 0 var(--oxblood);transition:transform .08s,box-shadow .08s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.navbtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--oxblood);color:var(--white)}

/* ---- section frame ---- */
section{position:relative;padding:96px 0;z-index:2}
.secno{font-family:var(--m);font-size:12px;letter-spacing:3px;color:var(--oxblood);font-weight:600}
.sectitle{font-family:var(--d);font-weight:800;font-size:clamp(34px,4.6vw,56px);letter-spacing:-1.5px;line-height:0.94;margin:12px 0 0}
.sectitle .ox{color:var(--oxblood)}
.seclede{font-family:var(--ser);font-size:19px;line-height:1.5;color:var(--inksoft);max-width:620px;margin-top:18px}
.rule{border:none;border-top:2px solid var(--ink);margin:0}

/* shared step-card grid (used by How-it-works, Bridge, Under-the-hood) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.step{position:relative;padding:26px 22px 24px}
.stepno{font-family:var(--d);font-weight:900;font-size:46px;line-height:1;color:var(--oxbloodlt);-webkit-text-stroke:1.5px var(--oxblood);letter-spacing:-2px}
.steph{font-family:var(--d);font-weight:800;font-size:20px;letter-spacing:-.4px;margin-top:14px}
.stepp{font-family:var(--ser);font-size:15.5px;line-height:1.5;color:var(--inksoft);margin-top:8px}
.stepicon{position:absolute;top:24px;right:22px}

/* footer */
footer{padding:50px 0 60px;border-top:2px solid var(--ink);margin-top:0}
.footin{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}
.footmono{font-family:var(--m);font-size:11px;letter-spacing:1px;color:var(--inksoft);line-height:1.9}

/* ---- reveal animation ---- visible by default; animate only when JS confirmed ---- */
@keyframes revealUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
html.js .reveal{opacity:0}
html.js .reveal.in{animation:revealUp .7s cubic-bezier(.2,.7,.3,1) both}
html.js .reveal.in.d1{animation-delay:.08s}html.js .reveal.in.d2{animation-delay:.16s}html.js .reveal.in.d3{animation-delay:.24s}html.js .reveal.in.d4{animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal.in{opacity:1;transform:none;animation:none}
  .card,.step.card,.btn,.navbtn{transition:none}
  .step.card:hover,.btn:hover,.navbtn:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---- legal-prose: structured content for policy/terms/notes ---- */
.legal-prose h2{font-family:var(--d);font-weight:800;font-size:22px;letter-spacing:-.4px;margin:36px 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.legal-prose h2:first-child{margin-top:8px;border-top:none;padding-top:0}
.legal-prose h3{font-family:var(--d);font-weight:700;font-size:16px;letter-spacing:.2px;margin:24px 0 8px;color:var(--ink)}
.legal-prose p,.legal-prose li{font-family:var(--ser);font-size:17px;line-height:1.65;color:var(--ink);margin:0 0 14px}
.legal-prose p{color:var(--inksoft)}
.legal-prose strong{color:var(--ink);font-weight:600}
.legal-prose ul,.legal-prose ol{padding-left:22px;margin:0 0 16px}
.legal-prose ul li,.legal-prose ol li{margin-bottom:8px}
.legal-prose a{color:var(--oxblood);text-decoration:underline}
.legal-prose a:hover{color:var(--ink)}
.legal-prose blockquote{border-left:3px solid var(--oxblood);padding:6px 0 6px 16px;margin:18px 0;font-family:var(--ser);font-style:italic;color:var(--inksoft)}
.legal-prose code{font-family:var(--m);font-size:13px;background:var(--card);padding:2px 6px;border-radius:2px;color:var(--ink)}
.legal-prose .lead{font-family:var(--d)!important;font-weight:800;font-size:13px!important;letter-spacing:2px;text-transform:uppercase;color:var(--oxblood);font-style:normal;display:block;margin-bottom:6px}

/* doc-header for legal pages: case-file framed title */
.doc-header{padding:130px 0 24px;position:relative;z-index:2}
.doc-tab{display:inline-block;background:var(--ink);color:var(--paper);font-family:var(--m);font-size:10px;font-weight:600;letter-spacing:1.5px;padding:5px 14px;border-radius:3px 3px 0 0;text-transform:uppercase}
.doc-frame{background:var(--card);border:2px solid var(--ink);border-radius:2px;box-shadow:8px 8px 0 var(--ink);padding:42px 38px 38px;position:relative}
.doc-frame .doc-tab{position:absolute;top:-14px;left:24px}
.doc-meta{font-family:var(--m);font-size:11px;letter-spacing:1.5px;color:var(--inkfaint);text-transform:uppercase;display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.doc-meta span b{color:var(--ink);font-weight:600}
.doc-title{font-family:var(--d);font-weight:900;font-size:clamp(36px,4.4vw,52px);letter-spacing:-1.5px;line-height:.95;margin:18px 0 0}
.doc-lede{font-family:var(--ser);font-size:18px;line-height:1.55;color:var(--inksoft);margin-top:18px;max-width:60ch}

/* notes list */
.note-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:46px}
.note-card{display:flex;flex-direction:column;gap:12px;padding:24px 22px;background:var(--card);border:2px solid var(--ink);border-radius:2px;box-shadow:5px 5px 0 var(--ink);text-decoration:none;transition:transform .18s,box-shadow .18s;color:inherit}
.note-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.note-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--m);font-size:11px;color:var(--inkfaint);letter-spacing:1px;text-transform:uppercase}
.note-title{font-family:var(--d);font-weight:800;font-size:22px;letter-spacing:-.4px;line-height:1.1;margin:0}
.note-excerpt{font-family:var(--ser);font-size:15px;line-height:1.55;color:var(--inksoft);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;font-family:var(--m);font-size:11px;color:var(--inkfaint);letter-spacing:.5px}
.note-foot .read{color:var(--oxblood);font-weight:600}

.tag-pill{display:inline-block;font-family:var(--m);font-size:10px;font-weight:600;letter-spacing:1.5px;padding:3px 9px;border-radius:2px;text-transform:uppercase;border:1px solid;line-height:1.4}
.tag-blog{background:var(--slatelt);border-color:var(--slate);color:var(--slatedk)}
.tag-news{background:#dfe7d4;border-color:var(--olive);color:var(--olive)}
.tag-changelog{background:var(--oxbloodlt);border-color:var(--oxblood);color:var(--oxblood)}
.tag-tip{background:#f1e2c4;border-color:var(--ochre);color:#7d5515}
.tag-character{background:#e9d8e0;border-color:#7a3953;color:#7a3953}
.tag-faq{background:rgba(38,32,25,0.08);border-color:var(--line);color:var(--inksoft)}
.tag-legal{background:rgba(38,32,25,0.05);border-color:var(--line);color:var(--inkfaint)}

.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.filter-btn{font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:7px 14px;border-radius:2px;background:transparent;border:1.5px solid var(--line);color:var(--inksoft);cursor:pointer;transition:all .15s}
.filter-btn:hover{border-color:var(--oxblood);color:var(--oxblood)}
.filter-btn.active{background:var(--ink);border-color:var(--ink);color:var(--white)}

.empty-state{text-align:center;padding:60px 20px;color:var(--inkfaint);font-family:var(--ser);font-size:18px}
.empty-state .label{display:block;margin-bottom:10px}

/* ---- responsive ---- */
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr}
  .note-grid{grid-template-columns:1fr}
  .navmeta .hidesm{display:none}
  .doc-frame{padding:32px 26px 28px}
}
@media (max-width:560px){
  .wrap,.wrap-sm,.navin{padding-left:22px;padding-right:22px}
  .steps{grid-template-columns:1fr}
  .doc-title{font-size:32px}
  .doc-frame{padding:28px 22px 24px}
}