/* =====================================================================================
   Human Cheat Codes — Certificate in Applied Psychology & Human Behaviour (APHB)
   Shared system for the sales page and the application form. Three colours only:
   black, white, and one neon — the highlighter. Fraunces display · Newsreader reading · Jost UI.
   ===================================================================================== */
:root{
  --k0:#0F0E0D; --k1:#161513; --k2:#1D1B19; --k3:#262321;
  --line:rgba(255,245,230,.09); --line2:rgba(255,245,230,.2);
  --w:#F3EEE6; --soft:#C4BDB2; --mut:#8E877D;
  --neon:#FF8A4C; --neon-ink:#1A0E06; --neon-soft:rgba(255,138,76,.13);
  --display:'Fraunces',Georgia,serif; --read:'Newsreader',Georgia,'Times New Roman',serif; --ui:'Jost',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--k0);color:var(--w);font-family:var(--read);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--neon);color:var(--neon-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.015em;font-variation-settings:"SOFT" 30;text-wrap:balance}
.k{font-family:var(--ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--neon);font-weight:500}
.mono{font-family:var(--ui);font-size:13px;letter-spacing:.06em;color:var(--mut)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;
  background:rgba(5,5,5,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .brandmark{font-family:var(--display);font-size:17px;color:var(--w)}
.nav .brandmark small{display:block;font-family:var(--ui);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:2px}
.nav a.back{font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}

/* buttons: neon pill, white hairline pill, quiet */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ui);font-size:13.5px;font-weight:500;letter-spacing:.06em;
  background:var(--neon);color:var(--neon-ink);border:1px solid var(--neon);border-radius:999px;padding:15px 26px;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease-out,filter .16s ease-out,background .16s ease-out,color .16s ease-out}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--w);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--w)}
.btn.quiet{background:transparent;color:var(--soft);border-color:transparent;padding-left:12px;padding-right:12px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.btn.big{padding:18px 32px;font-size:15px}

/* cards: modest radius, raised black, hairline */
.card{background:var(--k1);border:1px solid var(--line);border-radius:8px;padding:24px 26px}
.card h3{font-size:22px;margin-bottom:8px}
.card p{color:var(--soft);font-size:17px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* section rhythm */
.sec{padding:78px 0;border-top:1px solid var(--line)}
.sec .k{margin-bottom:16px}
.sec h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:18px;max-width:22ch}
.sec .lede{font-size:21px;color:var(--soft);max-width:60ch;margin-bottom:34px;line-height:1.5}
.sec p.body{font-size:18.5px;color:var(--soft);max-width:62ch;margin-bottom:16px}
.sec p.body b{color:var(--w);font-weight:600}

/* the evidence labels — one neon, five fill levels. This is the signature. */
.lbl{display:inline-flex;align-items:center;font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 9px 2px;border-radius:3px;border:1px solid var(--neon);color:var(--neon);line-height:1.5;white-space:nowrap;vertical-align:middle;margin:0 2px}
.lbl-strong{background:var(--neon);color:var(--neon-ink)}
.lbl-moderate{background:var(--neon-soft)}
.lbl-emerging{background:transparent}
.lbl-contested{border-style:dashed;background:transparent}
.lbl-weak{border-color:var(--line2);color:var(--mut);text-decoration:line-through;text-decoration-color:var(--mut)}

/* forms */
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-family:var(--ui);font-size:12px;letter-spacing:.08em;color:var(--mut);margin-bottom:8px}
.in,.ta,.sel{width:100%;font:inherit;font-size:18px;color:var(--w);background:var(--k1);border:1px solid var(--line2);border-radius:4px;padding:14px 16px;outline:0;
  transition:border-color .16s ease-out,box-shadow .16s ease-out}
.in:focus,.ta:focus,.sel:focus{border-color:var(--neon);box-shadow:0 0 0 3px var(--neon-soft)}
.in::placeholder,.ta::placeholder{color:var(--mut)}
.ta{min-height:130px;resize:vertical;line-height:1.5}
.sel{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font:inherit;font-family:var(--ui);font-size:15px;color:var(--w);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:11px 18px;cursor:pointer;
  transition:background .16s ease-out,color .16s ease-out,border-color .16s ease-out}
.chip:hover{border-color:var(--w)}
.chip.on{background:var(--neon);color:var(--neon-ink);border-color:var(--neon)}
.opt{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line2);border-radius:6px;margin-bottom:10px;cursor:pointer;background:var(--k1);
  font-size:18px;transition:border-color .16s ease-out,background .16s ease-out}
.opt:hover{border-color:var(--w)}
.opt.on{border-color:var(--neon);box-shadow:inset 0 0 0 1px var(--neon)}
.opt input{margin-top:6px;accent-color:var(--neon)}
.check{display:flex;gap:14px;align-items:flex-start;font-size:18px;padding:16px 18px;border:1px solid var(--line2);border-radius:6px;background:var(--k1);cursor:pointer}
.check input{margin-top:6px;width:18px;height:18px;accent-color:var(--neon)}
.bar{height:3px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--neon);transition:width .22s ease-out}

/* accordion */
details{border-top:1px solid var(--line);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-family:var(--display);font-size:21px;color:var(--w)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--ui);color:var(--neon);font-size:22px;flex:none}
details[open] summary::after{content:"\2013"}
details p{color:var(--soft);font-size:17.5px;margin-top:12px;max-width:66ch}

footer{border-top:1px solid var(--line);padding:34px 20px 46px;text-align:center;font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
footer a{color:var(--soft);margin:0 10px}
/* reveal: visible at rest, rises when it enters view */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rv.in{animation:rise .55s ease-out both}

@media(max-width:640px){body{font-size:17px}.sec{padding:56px 0}.card{padding:20px}.btn{padding:14px 20px}.btn.big{padding:16px 24px;width:100%}}

@media(max-width:640px){.nav .brandmark{display:none}.nav a.back{white-space:nowrap}}

/* =========================================================================
   JOURNAL (24 Sep) — paper, ink, navy, citation ochre. Overrides the tokens above.
   ========================================================================= */
:root{
  --k0:#F4F1EA;--k1:#FFFDF9;--k2:#ECE8DF;--k3:#E3DFD5;
  --line:#DAD5C9;--line2:#C6C0B2;
  --w:#14181F;--soft:#4A5160;--mut:#7A8190;
  --neon:#1E3A5F;--neon-ink:#FFFFFF;--neon-soft:#E3EAF3;--ochre:#B45309;--ochre-soft:#F6E7D6;--cloth:#16273F;
}
html{color-scheme:light}
body{background:var(--k0);color:var(--w)}
.k{color:var(--ochre)}
.nav{background:rgba(244,241,234,.92)!important;border-bottom:1px solid var(--w)}
.nav .brandmark{color:var(--w)}.nav a.back{color:var(--soft)}
.btn{border-radius:3px;letter-spacing:.1em;text-transform:uppercase;font-size:12px;box-shadow:none}
.btn:hover{background:#254A78;transform:none;filter:none}
.btn.ghost{color:var(--w);border-color:var(--w)}.btn.ghost:hover{background:var(--w);color:var(--k0)}
.btn.quiet{color:var(--soft)}
.card{border-radius:4px}
.hero h1 em{color:var(--neon)}
.mark circle{stroke:rgba(20,24,31,.12)}
.three b{color:var(--neon)}
.strip{border-radius:4px}.strip b{color:var(--ochre)}
.lbl{border-radius:2px}
.lbl-strong{background:var(--neon);color:#fff;border-color:var(--neon)}
.lbl-moderate{background:var(--neon-soft);color:var(--neon)}
.lbl-emerging{color:var(--neon)}
.lbl-contested{background:var(--ochre-soft);color:var(--ochre);border-color:var(--ochre)}
.syl details{border-radius:4px}.syl summary small{color:var(--ochre)}.syl .wk div .lab{color:var(--neon)}
.tick li::before{background:var(--neon);border-radius:1px}
.promises li::before{color:var(--ochre)}
.price{border-radius:4px}.price.best{border-color:var(--neon);box-shadow:none;border-top:4px solid var(--neon)}
.price .tag{border-radius:2px;background:var(--ochre);color:#fff}
.inst .h{color:var(--neon)}
details summary::after{color:var(--ochre)}
.final{background:var(--cloth);color:#fff;border-top:0;margin-top:40px}
.final h2{color:#fff}.final .quiet{color:#8FA0B8}
footer{background:var(--cloth);border-top:1px solid rgba(255,255,255,.1);color:#8FA0B8}footer a{color:#C9D3E0}
.chip{border-radius:3px;color:var(--w);border-color:var(--line2)}.chip.on{background:var(--w);color:var(--k0);border-color:var(--w)}
.opt,.check{border-radius:3px}.opt.on{border-color:var(--neon);box-shadow:inset 0 0 0 1px var(--neon)}
.in,.ta,.sel{border-radius:3px}
.err{color:#7A2E2A}
.bar>i{background:var(--neon)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}