/* FirstHack Learn - the app shell.
   Three columns: destinations left, page middle, rail right.
   Loaded AFTER style.css and only adds to it; every existing page keeps its
   own markup. The accent is the brand red already in style.css (--blue,
   misnamed there and left alone on purpose).
   The long version of every decision in here is in LEARN-CSS-NOTES.md. */

:root{
  --lp-side:    216px;
  --lp-rail:    292px;
  --lp-top:     64px;
  --lp-gap:     20px;
  --lp-max:     1560px;
  --lp-side-thin: 72px;
}

/* top bar ----------------------------------------------------------- */
/* the collapsed sidebar ---------------------------------------------- */
/* The three-line button used to do nothing above 1000px: it only opened the
   mobile drawer, so on a laptop it was a control that swallowed a click and
   gave nothing back. Now it collapses the sidebar to an icon rail, which is
   what that button means on every app that has one, and the choice is
   remembered. */
body.lp-thin .lp-side{ flex-basis:var(--lp-side-thin,72px); width:var(--lp-side-thin,72px); }
body.lp-thin .lp-s-item{ justify-content:center; padding:0; }
body.lp-thin .lp-s-item span{ display:none; }
body.lp-thin .lp-s-head,
body.lp-thin .lp-s-rule,
body.lp-thin .lp-pro{ display:none; }
body.lp-thin .lp-s-item .fh-lang{ margin:0; }
/* An icon rail is only usable if the icons say what they are. */
body.lp-thin .lp-side .lp-s-item::after{
  content:attr(data-label); position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--text); color:var(--surface); font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:7px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .12s, transform .12s; z-index:8;
}
body.lp-thin .lp-side .lp-s-item:hover::after,
body.lp-thin .lp-side .lp-s-item:focus-visible::after{ opacity:1; transform:translateY(-50%); }
/* Applied before first paint, so a remembered rail never appears at full
   width for one frame and then snaps. */
html.pre-thin .lp-side{ flex-basis:var(--lp-side-thin,72px); width:var(--lp-side-thin,72px); }

.lp-top{
  position:sticky; top:0; z-index:70; height:var(--lp-top);
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 18px;
}
.lp-top .lp-burger{ display:grid; }
.lp-top .lp-search-sm{ display:none; margin-left:auto; }

/* brand + search ---------------------------------------------------- */
.lp-brand{ display:flex; align-items:baseline; gap:7px; text-decoration:none;
  font-size:21px; font-weight:750; letter-spacing:-.02em; flex:0 0 auto; }
.lp-brand small{ font-size:9.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-faint); }

.lp-search{ flex:1 1 auto; max-width:520px; position:relative; display:flex; }
.lp-search input{
  width:100%; height:42px; padding:0 74px 0 42px; font:inherit; font-size:14px;
  color:var(--text); background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-pill); transition:border-color .12s, background .12s;
}
.lp-search input::placeholder{ color:var(--text-faint); }
.lp-search input:focus{ outline:none; background:var(--surface);
  border-color:var(--blue); box-shadow:var(--glow); }
.lp-search .lp-mag{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-faint); pointer-events:none; display:flex; }
.lp-search kbd{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font:600 11px/1 var(--font); color:var(--text-faint); background:var(--surface);
  border:1px solid var(--border); border-radius:6px; padding:5px 7px; pointer-events:none;
}
@media (max-width:1100px){ .lp-search kbd{ display:none; } .lp-search input{ padding-right:16px; } }

/* top nav links ----------------------------------------------------- */
.lp-navlinks{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.lp-navlinks a{
  padding:8px 11px; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--text-dim); text-decoration:none; white-space:nowrap;
}
.lp-navlinks a:hover{ color:var(--text); background:var(--surface-2); }

.lp-navlinks a.on{ color:var(--blue); position:relative; }
.lp-navlinks a.on::after{
  content:''; position:absolute; left:11px; right:11px; bottom:2px; height:2.5px;
  border-radius:2px; background:var(--blue);
}
.lp-top .lp-icon{
  width:38px; height:38px; border-radius:9px; border:1px solid transparent;
  background:transparent; color:var(--text-dim); display:grid; place-items:center;
  cursor:pointer; padding:0; flex:0 0 auto;
}
.lp-top .lp-icon:hover{ background:var(--surface-2); color:var(--text); }

.lp-auth{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }

/* buttons ----------------------------------------------------------- */
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 18px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font:600 14px/1 var(--font);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, transform .06s;
}
.lp-btn:hover{ background:var(--surface-2); }
.lp-btn:active{ transform:translateY(1px); }
.lp-btn.pri{ background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.lp-btn.pri:hover{ background:var(--blue-dark); border-color:var(--blue-dark); }
.lp-btn.lg{ height:46px; padding:0 22px; font-size:15px; border-radius:10px; }
.lp-btn .fh-i{ flex:0 0 auto; }

/* the frame: sidebar | content | rail ------------------------------- */
.lp-wrap{ display:flex; align-items:flex-start; gap:0; }

/* sidebar ----------------------------------------------------------- */
.lp-side{
  position:sticky; top:var(--lp-top); flex:0 0 var(--lp-side); width:var(--lp-side);
  transition:flex-basis .16s ease, width .16s ease;
  height:calc(100vh - var(--lp-top)); border-right:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column; z-index:60;
}
.lp-s-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 10px 4px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.lp-s-scroll::-webkit-scrollbar{ width:9px; }
.lp-s-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:100px;
  border:3px solid var(--surface); }

.lp-s-item{
  display:flex; align-items:center; gap:11px; padding:0 11px; height:40px;
  border-radius:9px; text-decoration:none; color:var(--text-dim);
  font-size:14px; font-weight:600; letter-spacing:-.003em;
}
.lp-s-item:hover{ background:var(--surface-2); color:var(--text); }
.lp-s-item.on{ background:var(--blue-tint); color:var(--blue); }
.lp-s-item .fh-i{ flex:0 0 20px; }
.lp-s-item .fh-lang{ flex:0 0 auto; margin:0 -2px; }
.lp-s-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lp-s-head{
  padding:16px 11px 6px; font-size:11px; font-weight:750; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint);
}
.lp-s-rule{ height:1px; background:var(--border); margin:12px 11px; }

/* Go Pro card ------------------------------------------------------- */
.lp-pro{
  margin:14px 10px 4px; padding:14px; border-radius:12px;
  background:var(--amber-tint); border:1px solid #f0dcae;
}
.lp-pro b{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:#7a5100; }
.lp-pro p{ margin:6px 0 11px; font-size:12px; line-height:1.6; color:#6b4a06; }
.lp-pro .lp-btn{ width:100%; height:36px; font-size:13px;
  background:#8a5a00; border-color:#8a5a00; color:#fff; }
.lp-pro .lp-btn:hover{ background:#6f4800; border-color:#6f4800; }

.lp-s-foot{ flex:0 0 auto; padding:8px 10px 12px; border-top:1px solid var(--border); }

/* content column ---------------------------------------------------- */
.lp-main{ flex:1 1 auto; min-width:0; }
.lp-inner{ max-width:var(--lp-max); margin:0 auto; padding:var(--lp-gap); }

/* pages that take the right rail ------------------------------------ */
.lp-cols{ display:grid; grid-template-columns:minmax(0,1fr) var(--lp-rail); gap:var(--lp-gap);
  align-items:start; max-width:var(--lp-max); margin:0 auto; padding:var(--lp-gap); }
.lp-colmain{ min-width:0; }
.lp-rail{ position:sticky; top:calc(var(--lp-top) + var(--lp-gap));
  display:flex; flex-direction:column; gap:14px; }

@media (max-width:1240px){
  .lp-cols{ grid-template-columns:minmax(0,1fr); }
  .lp-rail{ position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
}

/* rail cards -------------------------------------------------------- */
.lp-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:16px 18px;
}
.lp-card > h3{ margin:0 0 2px; font-size:15px; letter-spacing:-.015em;
  display:flex; align-items:center; gap:8px; }
.lp-card > h3 .fh-i{ color:var(--blue); }
.lp-card .lp-more{ margin-left:auto; font-size:12.5px; font-weight:600; }

/* rail: streak ------------------------------------------------------ */
.lp-streak{ display:flex; gap:7px; margin-top:12px; }
.lp-day{ flex:1; text-align:center; }
.lp-dot{
  width:26px; height:26px; margin:0 auto 5px; border-radius:50%;
  border:1.5px solid var(--border); display:grid; place-items:center;
  color:transparent; background:var(--surface);
}
.lp-dot.hit{ background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.lp-dot.today{ border-color:var(--blue); border-style:dashed; }
.lp-day small{ font-size:10.5px; color:var(--text-faint); font-weight:600; }

/* rail: quote ------------------------------------------------------- */
.lp-quote{ font-size:14px; line-height:1.65; font-style:italic; color:var(--text-dim); margin:0; }
.lp-quote + .lp-qbar{ width:34px; height:3px; border-radius:2px;
  background:var(--blue); margin-top:12px; }

/* rail: trending ---------------------------------------------------- */
.lp-rank{ display:flex; align-items:center; gap:11px; padding:9px 0;
  text-decoration:none; color:inherit; border-top:1px solid var(--border-soft); }
.lp-rank:first-of-type{ border-top:0; }
.lp-rank i{
  flex:0 0 24px; height:24px; border-radius:7px; display:grid; place-items:center;
  font-style:normal; font-size:12px; font-weight:750;
  background:var(--surface-2); color:var(--text-faint);
}
.lp-rank:nth-of-type(1) i{ background:var(--amber-tint); color:#7a5100; }
.lp-rank:nth-of-type(2) i{ background:var(--blue-tint);  color:var(--blue); }
.lp-rank b{ font-size:13.5px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.lp-rank:hover b{ color:var(--blue); }

/* rail: companies (old grid, kept for safety) ----------------------- */
.lp-co{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.lp-co a{
  display:grid; place-items:center; height:46px; padding:0 6px; text-align:center;
  border:1px solid var(--border); border-radius:10px; text-decoration:none;
  font-size:11.5px; font-weight:650; color:var(--text-dim); line-height:1.25;
  overflow:hidden;
}
.lp-co a:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-tint); }

/* rail: the placement card ------------------------------------------ */
.lp-dark{
  border-radius:14px; padding:20px; color:#f4efef;
  background:linear-gradient(150deg,#2a1214 0%,#4a1218 55%,#7d1420 100%);
  position:relative; overflow:hidden;
}
.lp-dark .lp-eyebrow{ font-size:10.5px; font-weight:750; letter-spacing:.1em;
  text-transform:uppercase; color:#f0b9be; }
.lp-dark h3{ margin:8px 0 6px; font-size:20px; line-height:1.2; letter-spacing:-.02em; color:#fff; }
.lp-dark p{ margin:0 0 16px; font-size:13px; line-height:1.6; color:#e3cfd1; }
.lp-dark .lp-btn{ background:#fff; border-color:#fff; color:#7d1420; width:100%; }
.lp-dark .lp-btn:hover{ background:#f2e6e6; border-color:#f2e6e6; }
.lp-dark .lp-badge{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.14); display:grid; place-items:center; color:#fff;
}

/* hero -------------------------------------------------------------- */
.lp-hero{
  border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(135deg, var(--blue-tint) 0%, var(--surface) 62%);
  padding:30px 32px; position:relative; overflow:hidden;
}
.lp-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:28px; align-items:center; }
@media (max-width:900px){ .lp-hero-grid{ grid-template-columns:minmax(0,1fr); } }

.lp-pill{
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px;
  border-radius:var(--radius-pill); background:var(--blue-tint); color:var(--blue);
  font-size:12.5px; font-weight:650;
}
.lp-hero h1{
  margin:16px 0 0; font-size:clamp(30px,3.6vw,46px); line-height:1.08;
  letter-spacing:-.033em; text-wrap:balance;
}
.lp-hero h1 em{ font-style:normal; color:var(--blue); }
.lp-hero p.lead{ margin:14px 0 0; font-size:16px; line-height:1.65;
  color:var(--text-dim); max-width:46ch; }
.lp-hero .lp-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

.lp-scribble{ font-family:'Caveat',ui-rounded,cursive; font-size:21px; color:var(--text-faint);
  line-height:1.15; }
.lp-scribble.a{ position:absolute; top:18px; right:34px; text-align:center; transform:rotate(-6deg); }
.lp-scribble.b{ display:flex; align-items:flex-end; gap:8px; justify-content:flex-end;
  margin-top:10px; padding-right:8px; }
@media (max-width:1100px){ .lp-scribble.a{ display:none; } }

/* hero: the code card ----------------------------------------------- */
.lp-editor{
  border-radius:13px; overflow:hidden; background:var(--code-bg);
  border:1px solid var(--code-border); box-shadow:var(--e2);
}
.lp-tabs{ display:flex; gap:2px; padding:8px 8px 0; background:var(--code-bar); }
.lp-tabs button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:9px 13px; border-radius:8px 8px 0 0; font:600 12.5px/1 var(--font);
  color:#9aa3b2;
}
.lp-tabs button:hover{ color:#e6e9ef; }
.lp-tabs button.on{ background:var(--code-bg); color:#fff; }
.lp-code{ display:flex; font:500 12.8px/1.75 var(--mono); }
.lp-code .ln{ padding:16px 0 18px; width:38px; flex:0 0 38px; text-align:right;
  color:#5a6376; user-select:none; border-right:1px solid var(--code-border); }
.lp-code pre{ margin:0; padding:16px 16px 18px; overflow-x:auto; flex:1 1 auto;
  color:var(--code-text); }
.lp-code .c{ color:#7c8698; }
.lp-code .k{ color:#ff8f88; }
.lp-code .f{ color:#8ec7ff; }
.lp-code .s{ color:#9fe0a8; }
.lp-code .n{ color:#e3b877; }
.lp-run{ display:flex; justify-content:flex-end; padding:0 12px 12px; background:var(--code-bg); }
.lp-run .lp-btn{ height:34px; padding:0 15px; font-size:13px;
  background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.lp-run .lp-btn:hover{ background:var(--blue-dark); border-color:var(--blue-dark); }

/* stat strip -------------------------------------------------------- */
.lp-strip{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0; margin-top:18px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); overflow:hidden;
}
.lp-strip > div{ display:flex; align-items:center; gap:11px; padding:14px 15px;
  border-left:1px solid var(--border); min-width:0; }
.lp-strip > div:first-child{ border-left:0; }
.lp-strip > div > div{ min-width:0; }
@media (max-width:1400px){ .lp-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lp-strip > div:nth-child(3n+1){ border-left:0; }
  .lp-strip > div:nth-child(n+4){ border-top:1px solid var(--border); } }
@media (max-width:760px){ .lp-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-strip > div{ border-left:1px solid var(--border); border-top:1px solid var(--border); }
  .lp-strip > div:nth-child(2n+1){ border-left:0; }
  .lp-strip > div:nth-child(-n+2){ border-top:0; } }
.lp-strip i{
  flex:0 0 38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue);
}
.lp-strip b{ display:block; font-size:13.6px; letter-spacing:-.012em; line-height:1.28; }
.lp-strip small{ display:block; font-size:11.6px; color:var(--text-faint); line-height:1.35;
  margin-top:2px; }

/* sections ---------------------------------------------------------- */
.lp-sec{ margin-top:30px; }
.lp-sec-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.lp-sec-head h2{ margin:0; font-size:23px; letter-spacing:-.025em; }
.lp-sec-head a{ margin-left:auto; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px; }

.lp-grid{ display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }

/* course cards ------------------------------------------------------ */
.lp-course{
  display:flex; flex-direction:column; gap:10px; padding:16px;
  background:var(--surface); border:1px solid var(--border); border-radius:13px;
  text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s;
}
.lp-course:hover{ border-color:var(--blue-soft); box-shadow:var(--e2); transform:translateY(-2px); }
.lp-course .top{ display:flex; align-items:flex-start; }
.lp-course .free{
  margin-left:auto; font-size:11px; font-weight:700; padding:4px 9px;
  border-radius:var(--radius-pill); background:var(--blue-tint); color:var(--blue);
}
.lp-course h4{ margin:0; font-size:15.5px; line-height:1.3; letter-spacing:-.015em; }
.lp-course p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-dim); }
.lp-course .meta{ display:flex; gap:14px; margin-top:auto; padding-top:8px;
  font-size:12px; color:var(--text-faint); }
.lp-course .meta span{ display:inline-flex; align-items:center; gap:5px; }

.lp-three{ display:grid; gap:14px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.lp-three > div{ display:flex; gap:13px; align-items:flex-start; padding:16px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:13px; }
.lp-three i{ flex:0 0 38px; height:38px; border-radius:10px; display:grid;
  place-items:center; background:var(--blue-tint); color:var(--blue); }
.lp-three b{ display:block; font-size:14.5px; letter-spacing:-.01em; }
.lp-three small{ font-size:12.5px; line-height:1.55; color:var(--text-dim); }

/* mobile drawer ----------------------------------------------------- */
.lp-scrim{ display:none; }

@media (max-width:1000px){
  .lp-side{
    position:fixed; left:0; top:var(--lp-top); bottom:0; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:var(--e2);
  }
  /* Below this width the sidebar is a drawer, so "collapsed" means nothing —
     everything the rail hides comes back. */
  body.lp-thin .lp-side, html.pre-thin .lp-side{
    flex-basis:var(--lp-side); width:var(--lp-side); }
  body.lp-thin .lp-s-item{ justify-content:flex-start; padding:0 11px; }
  body.lp-thin .lp-s-item span{ display:inline; }
  body.lp-thin .lp-s-head, body.lp-thin .lp-s-rule, body.lp-thin .lp-pro{ display:block; }
  body.lp-thin .lp-side .lp-s-item::after{ content:none; }
  body.lp-open .lp-side{ transform:translateX(0); }
  body.lp-open .lp-scrim{ display:block; position:fixed; inset:var(--lp-top) 0 0;
    background:rgba(20,10,10,.4); z-index:55; }
  .lp-navlinks{ display:none; }
  .lp-inner, .lp-cols{ padding:14px; }
}

@media (max-width:760px){
  .lp-search{ display:none; }
  .lp-top .lp-search-sm{ display:grid; }
}
@media (max-width:620px){
  .lp-hero{ padding:22px 18px; }
  .lp-auth .lp-hide-sm{ display:none; }
  .lp-top{ padding:0 10px; gap:8px; }
  .lp-brand{ font-size:19px; }
  .lp-btn{ padding:0 14px; }
}
@media (max-width:420px){
  .lp-brand small{ display:none; }
  .lp-hero h1{ font-size:29px; }
}

/* every animation above, switched off ------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lp-side, .lp-course{ transition:none; }
}

/* scroll reveal - hides ONLY when the script proves it is running ---- */
html.lp-anim .lp-rv{ opacity:0; transform:translateY(14px); }
html.lp-anim .lp-rv.in{ opacity:1; transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }

.lp-navlinks a{ transition:color .12s, background .12s; }
.lp-navlinks a.on::after{ animation:lp-underline .22s cubic-bezier(.22,1,.36,1); transform-origin:left; }
@keyframes lp-underline{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.lp-s-item{ position:relative; transition:background .13s, color .13s; }

.lp-s-item.on::before{
  content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--blue);
  animation:lp-mark .22s cubic-bezier(.22,1,.36,1);
}
@keyframes lp-mark{ from{ transform:scaleY(.2); opacity:0; } to{ transform:none; opacity:1; } }
.lp-s-item:hover .fh-i{ transform:translateX(1px); }
.lp-s-item .fh-i{ transition:transform .13s; }

.lp-course{ position:relative; overflow:hidden; }
.lp-course::before{
  content:''; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-soft));
  transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.lp-course:hover::before, .lp-course:focus-visible::before{ transform:scaleX(1); }
.lp-course .fh-lang{ transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.lp-course:hover .fh-lang{ transform:scale(1.08) rotate(-3deg); }
.lp-course h4{ transition:color .13s; }
.lp-course:hover h4{ color:var(--blue); }

.lp-course .go{
  margin-left:auto; display:inline-flex; align-items:center; color:var(--blue);
  opacity:0; transform:translateX(-4px); transition:opacity .16s, transform .16s;
}
.lp-course:hover .go{ opacity:1; transform:none; }
.lp-course .free{
  background:var(--blue-tint); color:var(--blue); letter-spacing:.01em;
}

/* rail: carry on ---------------------------------------------------- */
.lp-resume{ border-color:var(--blue-soft); background:
  linear-gradient(160deg, var(--blue-tint) 0%, var(--surface) 70%); }
.lp-resume .lp-rtitle{ font-size:14.5px; font-weight:650; line-height:1.35;
  margin:8px 0 3px; display:block; color:var(--text); }
.lp-resume .lp-rtrack{ font-size:12px; color:var(--text-faint); }
.lp-resume .lp-btn{ width:100%; margin-top:13px; height:38px; font-size:13.5px; }

.lp-streak-n{ display:flex; align-items:baseline; gap:8px; margin-top:10px; }
.lp-streak-n b{ font-size:30px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.lp-streak-n span{ font-size:12.5px; color:var(--text-faint); }
.lp-dot{ transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .18s; }
.lp-dot.hit{ animation:lp-pop .32s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes lp-pop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.lp-card:hover .lp-dot.hit{ transform:scale(1.08); }

.lp-flame{ color:var(--text-faint); }
.lp-flame.lit{ color:var(--blue); animation:lp-flicker 2.6s ease-in-out infinite; }
@keyframes lp-flicker{ 0%,100%{ transform:none; } 50%{ transform:scale(1.12) rotate(-3deg); } }

.lp-rank{ align-items:flex-start; padding:10px 0; }

.lp-rank .lp-rbody{ display:block; min-width:0; flex:1; }
.lp-rank b{ display:block; }
.lp-bar{ display:block; height:5px; border-radius:3px; background:var(--surface-2); margin-top:6px; overflow:hidden; }
.lp-bar i{ display:block; height:100%; border-radius:3px; background:var(--blue);
  transform-origin:left; transform:scaleX(0); transition:transform .7s cubic-bezier(.22,1,.36,1); }
.lp-card.in .lp-bar i, .lp-rv.in .lp-bar i,
html:not(.lp-anim) .lp-bar i{ transform:scaleX(1); }
.lp-rank .lp-rn{ font-size:11px; color:var(--text-faint); margin-top:5px; display:block;
  font-variant-numeric:tabular-nums; }
.lp-rank i.num{ margin-top:1px; }

/* rail: companies as rows ------------------------------------------- */
.lp-colist{ margin-top:10px; }
.lp-corow{
  display:flex; align-items:center; gap:11px; padding:8px 0; text-decoration:none;
  color:inherit; border-top:1px solid var(--border-soft);
}
.lp-colist .lp-corow:first-child{ border-top:0; }
/* The mark is either a monogram tile or a real logo file. Both occupy the
   same 30px square, so a list with one licensed logo in it does not step
   out of line with the rest. */
.lp-corow i, .lp-corow .fh-co{
  flex:0 0 30px; width:30px; height:30px; border-radius:9px;
}
.lp-corow i{
  display:grid; place-items:center;
  font-style:normal; font-size:11.5px; font-weight:750; letter-spacing:-.01em;
  background:var(--surface-2); color:var(--text-dim); transition:background .13s, color .13s;
}
/* fh_company_mark hands each company its own pair of colours. The fallbacks
   keep the old grey tile if the variables are ever missing. */
.lp-corow i.fh-co-m{
  background:var(--t, var(--surface-2)); color:var(--k, var(--text-dim));
}
.lp-corow .fh-co{ object-fit:contain; background:#fff; border:1px solid var(--border-soft);
  padding:3px; }
.lp-corow b{ font-size:13.2px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-corow .fh-i{ margin-left:auto; color:var(--text-faint); opacity:0;
  transform:translateX(-4px); transition:opacity .15s, transform .15s; }
.lp-corow:hover i{ background:var(--blue-tint); color:var(--blue); }
.lp-corow:hover i.fh-co-m{ background:var(--t); color:var(--k); filter:brightness(.97); }
.lp-corow:hover b{ color:var(--blue); }
.lp-corow:hover .fh-i{ opacity:1; transform:none; color:var(--blue); }

.lp-dark{ transition:transform .2s cubic-bezier(.22,1,.36,1); }
.lp-dark:hover{ transform:translateY(-2px); }

/* hero: the typing caret -------------------------------------------- */
.lp-caret{ display:inline-block; width:7px; height:15px; margin-left:1px;
  background:var(--blue-soft); vertical-align:-2px; animation:lp-blink 1s step-end infinite; }
@keyframes lp-blink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
.lp-code pre{ min-height:5.4em; }
.lp-tabs button{ transition:background .13s, color .13s; }

.lp-strip > div{ transition:background .13s; }
.lp-strip > div:hover{ background:var(--surface-2); }
.lp-strip i{ transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.lp-strip > div:hover i{ transform:scale(1.08); }
.lp-strip b{ font-variant-numeric:tabular-nums; }

/* the three steps --------------------------------------------------- */
.lp-path{ position:relative; display:grid; gap:14px; margin-top:22px;
  grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:820px){ .lp-path{ grid-template-columns:minmax(0,1fr); } }
.lp-step{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px 18px 16px; text-decoration:none; color:inherit;
  transition:border-color .14s, transform .16s, box-shadow .16s;
}
.lp-step:hover{ border-color:var(--blue-soft); transform:translateY(-3px); box-shadow:var(--e2); }
.lp-step .n{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue); color:var(--on-blue); font-size:13px; font-weight:750;
  font-variant-numeric:tabular-nums;
}
.lp-step h4{ margin:12px 0 5px; font-size:16px; letter-spacing:-.018em; }
.lp-step p{ margin:0; font-size:13.2px; line-height:1.6; color:var(--text-dim); }
.lp-step .lnk{ display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:13px; font-weight:650; color:var(--blue); }
.lp-step .lnk .fh-i{ transition:transform .15s; }
.lp-step:hover .lnk .fh-i{ transform:translateX(3px); }

/* the closing band -------------------------------------------------- */
.lp-band{
  margin-top:26px; border-radius:16px; padding:26px 28px; overflow:hidden;
  background:linear-gradient(135deg, var(--blue-tint) 0%, var(--surface) 70%);
  border:1px solid var(--border);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.lp-band h3{ margin:0 0 6px; font-size:22px; letter-spacing:-.025em; }
.lp-band > div:first-child{ flex:1 1 320px; min-width:0; }
.lp-band p{ margin:0; font-size:14.5px; color:var(--text-dim); max-width:60ch; line-height:1.6; }
.lp-band .lp-cta{ display:flex; gap:10px; flex:0 0 auto; flex-wrap:wrap; }
@media (max-width:760px){ .lp-band .lp-cta{ margin-left:0; } }

/* footer ------------------------------------------------------------ */
.lp .footer{ margin-top:34px; border-top:1px solid var(--border);
  background:var(--surface-2); }
.lp .footer .footer-grid{ padding-top:30px; }
.lp .footer a{ transition:color .12s; }

@media (prefers-reduced-motion:reduce){
  html.lp-anim .lp-rv, html.lp-anim .lp-rv.in{
    opacity:1 !important; transform:none !important; transition:none !important; }
  .lp-caret{ animation:none; opacity:1; }
  .lp-flame.lit{ animation:none; }
  .lp-dot.hit{ animation:none; }
  .lp-bar i{ transition:none; transform:scaleX(1); }
  .lp-course:hover .fh-lang, .lp-step:hover, .lp-dark:hover,
  .lp-strip > div:hover i{ transform:none; }
  .lp-s-item.on::before{ animation:none; }
  .lp-navlinks a.on::after{ animation:none; }
}

/* pricing (pro.php) ------------------------------------------------- */
/* Centred, because the four cards below are centred and a left-aligned
   paragraph above a centred row leaves a wedge of empty page on the right
   that reads as something failing to load. */
/* The measure is on the PARAGRAPH, not on the block. With it on the block
   the three reassurance chips were being folded 2 + 1 inside a 66-character
   box while there was half a screen of room beside them. */
.pr-head{ text-align:center; }
.pr-head > *{ max-width:66ch; margin-left:auto; margin-right:auto; }
.pr-eyebrow{ font-size:11.5px; font-weight:750; letter-spacing:.11em; text-transform:uppercase;
  color:var(--blue); }
.pr-head h1{ margin:10px auto 0; font-size:clamp(28px,3.2vw,40px); line-height:1.08;
  letter-spacing:-.03em; text-wrap:balance; }
/* auto, not 0 — the shorthand here was overriding the auto margins set
   above and pulling the paragraph 300px left of the heading it sits under. */
.pr-head p{ margin:14px auto 0; font-size:16px; line-height:1.65; color:var(--text-dim); }

/* Three objections, answered before the price is read: it is not a
   subscription, nothing renews itself, and the free site stays free. */
.pr-assure{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; justify-content:center;
  max-width:none; }
.pr-assure span{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--border);
  font-size:12.8px; font-weight:600; color:var(--text-dim); }
.pr-assure .fh-i{ color:var(--blue); flex:0 0 auto; }

/* Four plans in a row is four narrow columns; at anything under a very
   wide screen they become a wall. Two by two gives each price room to be
   read, which is the only job this grid has. */
.pr-grid{ display:grid; gap:20px; margin-top:34px;
  grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
@media (min-width:1320px){ .pr-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:620px){ .pr-grid{ grid-template-columns:minmax(0,1fr); } }

.pr-plan{
  position:relative; display:flex; flex-direction:column; padding:26px 24px 24px;
  background:var(--surface); border:1px solid var(--border); border-radius:15px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pr-plan:hover{ border-color:var(--blue-soft); box-shadow:var(--e2); transform:translateY(-3px); }
/* The one to choose is filled and lifted; the rest are outlined. A pricing
   row where every button looks equally urgent makes the reader do the
   comparing twice. */
.pr-plan.best{ border-color:var(--blue); border-width:2px; padding:25px 23px 23px; }
.pr-plan .pr-tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:var(--on-blue); font-size:11px; font-weight:750;
  letter-spacing:.02em; padding:4px 12px; border-radius:var(--radius-pill); white-space:nowrap;
}
.pr-plan h3{ margin:0; font-size:17px; letter-spacing:-.018em; }
.pr-plan .pr-sub{ margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--text-dim);
  min-height:2.9em; }
.pr-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pr-price b{ font-size:38px; font-weight:750; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums; }
/* Brand tint, not green. There is no green anywhere else on this site and a
   single green chip beside a price looks like it came from another product. */
.pr-save{ font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--radius-pill);
  background:var(--blue-tint); color:var(--blue); }
.pr-plan .pr-meta{ margin:12px 0 0; font-size:12.8px; line-height:1.7;
  color:var(--text-faint); }
.pr-plan .lp-btn{ margin-top:auto; width:100%; }
.pr-plan .lp-btn.ghost{ background:var(--surface); }
.pr-cta-wrap{ padding-top:18px; }

/* comparison */
.pr-tbl{ width:100%; border-collapse:collapse; }
.pr-tbl th{ text-align:left; font-size:11.5px; font-weight:750; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint); padding:14px 20px;
  border-bottom:1px solid var(--border); }
.pr-tbl th:nth-child(3){ color:var(--blue); }
.pr-tbl td{ padding:17px 20px; border-bottom:1px solid var(--border-soft);
  font-size:14.5px; line-height:1.55; vertical-align:top; }
.pr-tbl tr:last-child td{ border-bottom:0; }
.pr-tbl tbody tr:hover{ background:var(--surface-2); }
.pr-tbl td:first-child{ font-weight:600; }
.pr-tbl td:nth-child(2){ color:var(--text-dim); }
.pr-tbl td:nth-child(3){ font-weight:700; color:var(--blue); background:var(--blue-tint); }
.pr-tbl tr:first-child td:nth-child(3){ border-top-left-radius:0; }

/* reassurance cards */
.pr-notes{ display:grid; gap:16px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
.pr-note{ display:flex; gap:13px; padding:20px; background:var(--surface);
  border:1px solid var(--border); border-radius:13px; }
.pr-note i{ flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue); }
.pr-note b{ display:block; font-size:14px; letter-spacing:-.01em; margin-bottom:3px; }
.pr-note p{ margin:0; font-size:13px; line-height:1.6; color:var(--text-dim); }

.pr-live{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:13px;
  background:var(--blue-tint); border:1px solid var(--blue-soft); margin-bottom:22px; }
.pr-live .fh-i{ color:var(--blue); flex:0 0 auto; margin-top:1px; }
.pr-live b{ display:block; font-size:14.5px; }
.pr-live p{ margin:3px 0 0; font-size:13.2px; line-height:1.6; color:var(--text-dim); }

@media (prefers-reduced-motion:reduce){
  .pr-plan:hover{ transform:none; }
}

/* the hero carousel -------------------------------------------------- */
/* Four or five banners on one piece of prime real estate. The rules it
   follows, in order of how often they are broken elsewhere:
   1. It pauses when a pointer is on it or something inside it has focus.
      A banner that slides away mid-sentence is worse than no banner.
   2. The dots are buttons, not decoration, and they say where you are.
   3. prefers-reduced-motion stops the rotation entirely — the first slide
      stays, the dots still work.
   4. Slide one is the product, not a promotion. Somebody who lands here
      and looks for two seconds sees what the site is. */
.hz{ position:relative; border-radius:16px; border:1px solid var(--border); overflow:hidden;
  background:linear-gradient(135deg, var(--blue-tint) 0%, var(--surface) 62%); }
.hz-view{ overflow:hidden; contain:paint; }
/* Each banner clips its own contents too. The hackathon ticker is a strip
   wider than the screen moving under a clip, and an animated transform is
   exactly the case where a browser will happily composite the moving layer
   outside a plain overflow:hidden. */
.hz-slide{ overflow:hidden; }
.hz-track{ display:flex; will-change:transform;
  transition:transform .5s cubic-bezier(.22,1,.36,1); }
.hz-slide{ flex:0 0 100%; min-width:100%; padding:24px 32px 26px;
  display:flex; align-items:center; }
/* Every banner is as tall as the tallest one — a strip that changes height
   under the reader's cursor is worse than a little breathing room — so the
   shorter ones sit in the middle of that height rather than at the top. */
.hz-slide > .hz-grid{ flex:1 1 auto; width:100%; }
@media (max-width:620px){ .hz-slide{ padding:18px 18px 20px; } }

.hz-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,364px);
  gap:26px; align-items:center; min-height:252px; }
@media (max-width:900px){ .hz-grid{ grid-template-columns:minmax(0,1fr); min-height:0; } }

.hz-eyebrow{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px;
  border-radius:var(--radius-pill); background:var(--blue-tint); color:var(--blue);
  font-size:12.5px; font-weight:650; }
.hz-slide h2{ margin:16px 0 0; font-size:clamp(26px,2.8vw,37px); line-height:1.12;
  letter-spacing:-.03em; text-wrap:balance; }
.hz-slide h2 em{ font-style:normal; color:var(--blue); }
.hz-slide p{ margin:13px 0 0; font-size:15.5px; line-height:1.65; color:var(--text-dim);
  max-width:48ch; }
.hz-cta{ display:flex; gap:11px; flex-wrap:wrap; margin-top:20px; }
/* Two calls to action belong on one line; the banner column is narrow, so
   they are a shade tighter here than they are elsewhere on the page. */
.hz-cta .lp-btn.lg{ padding:0 18px; font-size:14.5px; }
.hz-note{ margin-top:12px; font-size:12.5px; color:var(--text-faint); }

/* the dots + the progress of the current slide */
.hz-bar{ display:flex; align-items:center; gap:14px; padding:0 32px 18px; }
/* The dots live outside the slides, so on the black banner they would sit
   on a white shelf under it. The whole strip follows the banner instead. */
.hz{ transition:background-color .38s ease; }
.hz.is-dark{ background:#101012; border-color:#26262c; }
.hz.is-dark .hz-dots button{ background:#3d3d47; }
.hz.is-dark .hz-dots button.on{ background:#e8113c; }
.hz.is-dark .hz-arrows button{ background:transparent; border-color:#3d3d47; color:#f4f3f0; }
.hz.is-dark .hz-arrows button:hover{ border-color:#ff4d6a; color:#ff4d6a; }
@media (max-width:620px){ .hz-bar{ padding:0 18px 16px; } }
.hz-dots{ display:flex; gap:7px; }
.hz-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:var(--border); transition:width .2s, background .2s;
}
.hz-dots button.on{ width:26px; border-radius:5px; background:var(--blue); }
.hz-dots button:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.hz-arrows{ display:flex; gap:7px; margin-left:auto; }
.hz-arrows button{
  width:32px; height:32px; border-radius:9px; cursor:pointer; padding:0;
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim);
  display:grid; place-items:center;
}
.hz-arrows button:hover{ border-color:var(--blue); color:var(--blue); }
.hz-arrows .fh-i{ width:16px; height:16px; }
.hz-arrows .prev .fh-i{ transform:rotate(180deg); }

/* the art on the right of each banner. Built from boxes, not images:
   nothing to download, nothing to go stale, and it recolours with the
   theme. */
.hz-art{ position:relative; }
@media (max-width:900px){ .hz-art{ display:none; } }

.hz-panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px; box-shadow:var(--e2); }
.hz-panel .hz-row{ display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid var(--border-soft); font-size:13px; }
.hz-panel .hz-row:first-of-type{ border-top:0; }
.hz-panel .hz-row i{ flex:0 0 28px; height:28px; border-radius:8px; display:grid;
  place-items:center; background:var(--blue-tint); color:var(--blue); font-style:normal; }
.hz-panel .hz-row b{ font-weight:600; }
.hz-panel .hz-row span{ margin-left:auto; font-size:11.5px; font-weight:700;
  padding:3px 8px; border-radius:var(--radius-pill); background:var(--blue-tint); color:var(--blue); }
.hz-panel .hz-head{ display:flex; align-items:center; gap:9px; padding-bottom:11px;
  border-bottom:1px solid var(--border); margin-bottom:4px; }
.hz-panel .hz-head b{ font-size:13.5px; }
.hz-panel .hz-head .hz-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--blue); }
.hz-panel .hz-head .hz-live i{ width:7px; height:7px; border-radius:50%; background:var(--blue);
  animation:hz-pulse 1.6s ease-in-out infinite; }
@keyframes hz-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* a stack of faces, for the ambassador banner */
.hz-faces{ display:flex; margin-top:2px; }
.hz-faces i{ width:30px; height:30px; border-radius:50%; margin-left:-9px; font-style:normal;
  border:2px solid var(--surface); display:grid; place-items:center;
  font-size:11px; font-weight:750; background:var(--blue-tint); color:var(--blue); }
.hz-faces i:first-child{ margin-left:0; }

/* a countdown, for the hackathon */
.hz-clock{ display:flex; gap:10px; margin-top:14px; }
.hz-clock div{ flex:1; text-align:center; background:var(--surface); border:1px solid var(--border);
  border-radius:11px; padding:11px 6px; }
.hz-clock b{ display:block; font-size:22px; font-weight:750; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.hz-clock small{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-faint); }

@media (prefers-reduced-motion:reduce){
  .hz-track{ transition:none; }
  .hz-panel .hz-head .hz-live i{ animation:none; }
}

/* =====================================================================
   BANNER VARIANTS
   Three of the six banners carry their own look. The reason is not
   decoration: each one is selling a different thing to a different person,
   and a reader who has seen the strip twice should be able to tell which
   banner is up from the corner of their eye, before reading a word.
   ===================================================================== */

/* "applications open" — a live state, so it gets the live dot, and it is
   the only eyebrow on the page that does. */
.hz-eyebrow.is-hot{ background:var(--red-tint,#fdeaee); color:var(--danger,#c0113a); }
.hz-eyebrow.is-hot i{ width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:hz-pulse 1.6s ease-in-out infinite; }

/* ---------------------------------------------------- ambassador card */
.hz-id{ border-radius:14px; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--e2); }
.hz-id-top{ padding:11px 15px; color:#fff;
  background:linear-gradient(100deg, var(--blue) 0%, var(--blue-dark,#8e0f2e) 100%);
  display:flex; align-items:baseline; gap:9px; }
.hz-id-top span{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.hz-id-top b{ margin-left:auto; font-size:12px; font-weight:650; opacity:.92; }
.hz-id-body{ display:flex; align-items:center; gap:13px; padding:15px; }
.hz-id-face{ flex:0 0 46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue); border:1px dashed var(--border-strong,#d8d2d4); }
.hz-id-who b{ display:block; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.hz-id-who small{ display:block; margin-top:3px; font-size:12.5px; color:var(--text-faint); }
.hz-id-sign{ display:flex; align-items:center; gap:10px; padding:11px 15px;
  border-top:1px dashed var(--border); font-size:11.5px; color:var(--text-faint); }
/* The rule after the caption is a signature line, so it should look drawn
   rather than printed — one flat line reads as an empty table cell. */
.hz-id-sign i{ flex:1; height:1px; background:repeating-linear-gradient(90deg,
  var(--border-strong,#cfc8ca) 0 7px, transparent 7px 12px); }

.hz-perks{ display:flex; flex-direction:column; gap:7px; margin-top:13px; }
.hz-perks span{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); }
.hz-perks .fh-i{ color:var(--blue); flex:0 0 auto; }

/* ------------------------------------------------------ internships */
.hz-steps{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hz-steps > div{ position:relative; padding:13px 14px 14px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); }
.hz-steps i{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  font-style:normal; font-size:11.5px; font-weight:750;
  background:var(--blue-tint); color:var(--blue); }
.hz-steps b{ display:block; margin-top:9px; font-size:14px; font-weight:650; }
.hz-steps small{ display:block; margin-top:2px; font-size:11.5px; color:var(--text-faint); }

/* =====================================================================
   HACKATHON BANNER — the tournament theme, borrowed whole
   Near-black ground, one hot red fill, condensed capitals doing the
   shouting. The colours are the hackathon site's own tokens so the two
   pages read as one event: #e8113c is the fill, #ff4d6a is the same red
   pushed light enough to be read at body size, gold is ceremonial only.
   ===================================================================== */
.hz-slide.is-hack{
  --hk-bg:#101012; --hk-elev:#17171b; --hk-line:#2a2a30;
  --hk-ink:#f4f3f0; --hk-dim:#a8a8b2;
  --hk-red:#e8113c; --hk-red-text:#ff4d6a; --hk-gold:#f0b429;
  padding:0; display:flex; flex-direction:column; justify-content:center;
  color:var(--hk-ink); background:var(--hk-bg);
  background-image:
    radial-gradient(120% 95% at 76% -10%, rgba(232,17,60,.26) 0%, transparent 58%),
    repeating-linear-gradient(-14deg, rgba(255,255,255,.022) 0 2px, transparent 2px 11px);
}
.hz-slide.is-hack .hk-body{ flex:1 1 auto; display:flex; align-items:center;
  padding:20px 32px 24px; }
.hz-slide.is-hack .hz-grid{ width:100%; min-height:0;
  grid-template-columns:minmax(0,1fr) minmax(0,336px); }
@media (max-width:900px){ .hz-slide.is-hack .hz-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:620px){ .hz-slide.is-hack .hk-body{ padding:20px 18px 24px; } }

/* The ticker. Two identical passes of the same list, the track shifted by
   exactly half its width — that is what makes the loop seamless. */
.hk-ticker{ position:relative; overflow:hidden; contain:paint;
  border-bottom:1px solid var(--hk-red);
  background:var(--hk-red); }
.hk-run{ display:flex; align-items:center; gap:10px; width:max-content;
  padding:7px 0; animation:hk-run 26s linear infinite; }
.hk-run span{ font-size:11px; font-weight:750; letter-spacing:.11em;
  text-transform:uppercase; color:#fff; white-space:nowrap; }
.hk-run em{ font-style:normal; color:rgba(255,255,255,.55); }
@keyframes hk-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.hk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hk-chip{ display:inline-flex; align-items:center; gap:7px; height:29px; padding:0 12px;
  border:1px solid var(--hk-line); border-radius:4px; color:var(--hk-dim);
  font-size:10.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.hk-chip.is-live{ color:var(--hk-red-text); border-color:rgba(232,17,60,.5); }
.hk-chip.is-live i{ width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:hz-pulse 1.6s ease-in-out infinite; }
.hk-chip.is-gold{ color:var(--hk-gold); border-color:rgba(240,180,41,.45); }

.hz-slide.is-hack h2.hk-h{
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.004em; line-height:.94;
  font-size:clamp(29px,3.2vw,46px); margin:16px 0 0; color:var(--hk-ink); }
.hz-slide.is-hack h2.hk-h em{ font-style:normal; color:var(--hk-red-text); }
.hz-slide.is-hack p{ color:var(--hk-dim); max-width:44ch; }

.hk-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px;
  padding:0 20px; border-radius:5px; font-size:12.5px; font-weight:750;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  background:var(--hk-red); color:#fff; border:1px solid var(--hk-red);
  box-shadow:0 12px 28px -14px rgba(232,17,60,.95);
  transition:background .16s ease, transform .16s ease; }
.hk-btn:hover{ background:#ff1f4d; transform:translateY(-1px); }
.hk-btn.is-ghost{ background:transparent; color:var(--hk-ink);
  border-color:rgba(255,255,255,.34); box-shadow:none; }
.hk-btn.is-ghost:hover{ border-color:var(--hk-ink); background:rgba(255,255,255,.06); }
.hk-btn:focus-visible{ outline:2px solid var(--hk-red-text); outline-offset:3px; }
.hk-when{ margin-top:13px; display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hk-dim); }

.hk-poster{ background:var(--hk-elev); border:1px solid var(--hk-line);
  border-radius:12px; padding:18px 20px 16px; }
.hk-poster-k{ font-size:10.5px; font-weight:750; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hk-dim); }
.hk-poster-v{ font-family:'Anton', 'Arial Narrow', Impact, sans-serif; font-weight:400;
  font-size:clamp(30px,3.2vw,44px); line-height:1.02; margin-top:4px;
  color:var(--hk-gold); }
.hk-poster-rule{ height:2px; margin:14px 0 12px; background:var(--hk-red); width:54px; }
.hk-poster-row{ display:flex; align-items:flex-start; gap:10px; padding:7px 0;
  font-size:13.5px; color:var(--hk-ink); }
.hk-poster-row .fh-i{ color:var(--hk-red-text); flex:0 0 auto; margin-top:1px; }

@media (prefers-reduced-motion: reduce){
  .hk-run{ animation:none; }
  .hz-eyebrow.is-hot i, .hk-chip.is-live i{ animation:none; }
}

/* =====================================================================
   TOP STRIP — the hackathon ticker
   The strip above the header carries the same moving line the hackathon
   site runs. It is one line tall on every screen: the message scrolls, the
   link and the close button never do, so the strip cannot push the page
   down a row on a phone the way a wrapping banner does.
   ===================================================================== */
.promo-strip.is-run .promo-inner{ flex-wrap:nowrap; gap:12px; padding:0 20px; min-height:40px; }
.promo-run{ flex:1 1 auto; min-width:0; overflow:hidden; contain:paint;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22px,
    #000 calc(100% - 22px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 22px,
    #000 calc(100% - 22px), transparent); }
.promo-runner{ display:flex; align-items:center; gap:10px; width:max-content;
  padding:11px 0; animation:promo-run 34s linear infinite; }
.promo-runner span{ font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; white-space:nowrap; }
.promo-runner em{ font-style:normal; opacity:.5; }
@keyframes promo-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Stop it while somebody is trying to read a particular line. */
.promo-run:hover .promo-runner{ animation-play-state:paused; }
.promo-strip.is-run .promo-cta{ flex:none; }
@media (max-width:640px){
  .promo-strip.is-run .promo-inner{ gap:8px; padding:0 12px; }
  .promo-runner span{ font-size:10.5px; letter-spacing:.07em; }
  .promo-strip.is-run .promo-cta{ font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce){ .promo-runner{ animation:none; } }

/* =====================================================================
   ENTRY POP-UP
   Hidden in the markup and opened by script — the opposite of everything
   else on this page. Content that needs a script to appear disappears when
   the script fails, which is the right failure for a pop-up: no script, no
   interruption. The alternative is a full-screen overlay whose close
   button cannot close.
   ===================================================================== */
.hp{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center;
  justify-content:center; padding:20px; }
.hp[hidden]{ display:none; }
.hp:not(.is-open){ pointer-events:none; }
.hp-back{ position:absolute; inset:0; background:rgba(8,8,10,.8);
  opacity:0; transition:opacity .22s ease; }
.hp.is-open .hp-back{ opacity:1; }

.hp-card{ position:relative; width:100%; max-width:410px; border-radius:16px;
  padding:26px 26px 22px; color:#f4f3f0;
  background:#17171b; border:1px solid #2a2a30;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  background-image:radial-gradient(120% 80% at 80% -20%, rgba(232,17,60,.3), transparent 62%);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .24s ease, transform .24s cubic-bezier(.22,1,.36,1); }
.hp.is-open .hp-card{ opacity:1; transform:none; }

.hp-x{ position:absolute; top:8px; right:10px; width:36px; height:36px;
  background:none; border:0; cursor:pointer; color:#a8a8b2; font-size:27px; line-height:1; }
.hp-x:hover{ color:#f4f3f0; }
.hp-x:focus-visible{ outline:2px solid #ff4d6a; outline-offset:-2px; }

.hp-eyebrow{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px;
  border:1px solid rgba(232,17,60,.5); border-radius:4px; color:#ff4d6a;
  font-size:10.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.hp-eyebrow i{ width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:hz-pulse 1.6s ease-in-out infinite; }
.hp-title{ color:#f4f3f0;   /* h2 inherits the page's dark ink otherwise */
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif; font-weight:400;
  text-transform:uppercase; font-size:clamp(27px,6.2vw,35px); line-height:.98;
  margin:14px 0 9px; }
.hp-sub{ margin:0 0 17px; font-size:14.5px; line-height:1.6; color:#a8a8b2; }
.hp-sub b{ color:#f4f3f0; font-weight:650; }

.hp-cd{ display:flex; gap:7px; margin:0 0 17px; }
.hp-cd div{ flex:1 1 0; text-align:center; border-radius:8px; padding:9px 4px;
  background:#101012; border:1px solid #2a2a30; }
.hp-cd b{ display:block; font-family:'Anton','Arial Narrow',Impact,sans-serif;
  font-weight:400; font-size:23px; line-height:1.1; font-variant-numeric:tabular-nums; }
.hp-cd small{ display:block; margin-top:2px; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#8e8e99; }
.hp-k{ font-size:10.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:#8e8e99; margin-bottom:7px; }

.hp-go{ display:flex; align-items:center; justify-content:center; width:100%; height:46px;
  border-radius:6px; background:#e8113c; color:#fff; text-decoration:none;
  font-size:13px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 14px 30px -14px rgba(232,17,60,.95); }
.hp-go:hover{ background:#ff1f4d; color:#fff; }
.hp-go:focus-visible{ outline:2px solid #ff4d6a; outline-offset:3px; }
.hp-later{ display:block; width:100%; margin-top:10px; padding:7px;
  background:none; border:0; cursor:pointer; color:#8e8e99; font-size:13.5px; }
.hp-later:hover{ color:#a8a8b2; text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .hp-back, .hp-card{ transition:none; }
  .hp-eyebrow i{ animation:none; }
}

/* The ownership line under the company list. Small, but it is the sentence
   that keeps somebody else's logo an identification rather than a claim. */
.lp-legal{ margin:12px 0 0; font-size:10.5px; line-height:1.5; color:var(--text-faint); }

/* =====================================================================
   COURSE CATALOGUE  (/courses.php)
   The page is a shop window for the one thing on this site that costs
   money, so it has to answer three questions before anything else: what
   is here, how much of it is free, and where do I start. The hero
   answers the first two, and every card ends in the third.
   ===================================================================== */
/* The page breathes in one place: this gap is the rhythm between every
   band on it, so nothing has to bring margins of its own. */
.cs-wrap{ display:flex; flex-direction:column; gap:30px; }

.cs-hero{ position:relative; overflow:hidden; display:flex; align-items:center; gap:30px;
  padding:34px 36px; border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(120deg, var(--blue-tint) 0%, var(--surface) 64%); }
.cs-hero-txt{ flex:1 1 auto; min-width:0; }
.cs-kicker{ margin:0; font-size:11.5px; font-weight:750; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); }
.cs-hero h1{ margin:10px 0 0; font-size:clamp(26px,3vw,38px); line-height:1.12;
  letter-spacing:-.03em; text-wrap:balance; }
.cs-hero h1 em{ font-style:normal; color:var(--blue); }
.cs-sub{ margin:12px 0 0; max-width:56ch; font-size:15px; line-height:1.65; color:var(--text-dim); }

/* Four counts, one row, all the same shape — they are a set, so they read
   as one fact about the library rather than four separate boasts. */
.cs-stats{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.cs-stats > div{ display:flex; align-items:center; gap:11px; padding:12px 16px;
  border-radius:12px; background:var(--surface); border:1px solid var(--border); }
.cs-stats i{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--blue-tint); color:var(--blue); }
.cs-stats b{ font-size:19px; font-weight:750; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.cs-stats small{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); margin-top:1px; }
.cs-stats .is-free i{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }

/* The handwriting sits ABOVE the drawing, not on top of it. The first
   version overlapped the books and both became unreadable. */
.cs-hero-art{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.cs-hero-art svg{ display:block; }
.cs-scribble{ font-family:'Caveat',ui-rounded,cursive; font-size:21px; line-height:1.15;
  text-align:right; color:var(--text-faint); transform:rotate(-4deg); margin-right:10px; }
@media (max-width:1000px){ .cs-hero-art{ display:none; } }
@media (max-width:620px){ .cs-hero{ padding:22px 18px; } .cs-stats > div{ flex:1 1 40%; } }

/* ------------------------------------------------------------- pro band */
.cs-pro{ display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:14px;
  border:1px solid var(--blue); background:var(--blue-tint); }
.cs-pro-i{ flex:0 0 40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--blue); color:#fff; }
.cs-pro b{ display:block; font-size:15.5px; font-weight:700; }
.cs-pro p{ margin:3px 0 0; font-size:13.2px; line-height:1.55; color:var(--text-dim); max-width:72ch; }
.cs-pro .lp-btn{ margin-left:auto; flex:none; }
@media (max-width:820px){
  .cs-pro{ flex-wrap:wrap; }
  .cs-pro .lp-btn{ margin-left:0; width:100%; justify-content:center; }
}

/* --------------------------------------------------------------- filter */
.cs-bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cs-chips{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cs-chip{ display:inline-flex; align-items:center; height:34px; padding:0 15px;
  border-radius:var(--radius-pill); border:1px solid var(--border);
  background:var(--surface); color:var(--text-dim); text-decoration:none;
  font-size:13px; font-weight:600; transition:border-color .13s, color .13s, background .13s; }
.cs-chip:hover{ border-color:var(--blue); color:var(--blue); }
.cs-chip.on{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }
.cs-sep{ width:1px; height:20px; background:var(--border); margin:0 4px; }

.cs-sort{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.cs-sort label{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:600; color:var(--text-faint); }
.cs-sort select{ height:32px; padding:0 10px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px; font-weight:600; }
.cs-sort button{ height:32px; padding:0 12px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); font-size:13px; font-weight:600; cursor:pointer; }

/* ---------------------------------------------------------------- cards */
/* Wider minimum, wider gutter. Four cards on a big screen was four
   columns of text with 16px between them — the eye could not tell where
   one card ended and the next began. */
.cs-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:22px; }
/* Above this width auto-fill starts packing a fifth column in and the grid
   goes right back to feeling cramped. Four is the ceiling: past that the
   cards stop being cards and become a table. */
@media (min-width:1480px){ .cs-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.cs-card{ display:flex; flex-direction:column; padding:24px 22px 22px; border-radius:16px;
  border:1px solid var(--border); background:var(--surface); color:inherit;
  text-decoration:none; transition:border-color .14s, box-shadow .14s, transform .14s; }
.cs-card:hover{ border-color:var(--blue); box-shadow:var(--e2); transform:translateY(-2px);
  text-decoration:none; }
.cs-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cs-tags{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cs-tag{ display:inline-flex; align-items:center; height:24px; padding:0 10px;
  border-radius:var(--radius-pill); background:var(--surface-2); color:var(--text-dim);
  font-size:11.5px; font-weight:650; white-space:nowrap; }
.cs-tag.is-free{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }
.cs-card h2{ margin:18px 0 0; font-size:17px; font-weight:700; letter-spacing:-.015em;
  line-height:1.32; }
/* Two lines of tagline, always. Cards in a row that clip at different
   points look broken; cards that grow to fit the longest one leave the
   short ones with a hole above the button. */
.cs-card p{ margin:9px 0 22px; font-size:13.6px; line-height:1.68; color:var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* margin-top:auto pins the footer of the card to the bottom, so the meta
   line and the call to action sit on the same baseline right across a row
   even when one title runs to two lines. */
.cs-meta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:auto; padding-top:16px;
  border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--text-faint); }
.cs-meta span{ display:inline-flex; align-items:center; gap:5px; }
.cs-go{ display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-size:13.5px; font-weight:700; color:var(--blue); }
.cs-card:hover .cs-go .fh-i{ transform:translateX(3px); }
.cs-go .fh-i{ transition:transform .15s ease; }

/* ---------------------------------------------------------------- empty */
.cs-empty{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:44px 20px; border-radius:14px; border:1px dashed var(--border-strong,#dcd5d6);
  background:var(--surface); color:var(--text-faint); }
.cs-empty b{ font-size:16px; color:var(--text); }
.cs-empty p{ margin:0; font-size:13.5px; }
.cs-empty .lp-btn{ margin-top:6px; }

/* ----------------------------------------------------------------- note */
.cs-note{ display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr); gap:26px;
  padding:26px 28px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface-2); }
.cs-note h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.015em; }
.cs-note p{ margin:0 0 10px; font-size:13.8px; line-height:1.7; color:var(--text-dim); }
.cs-note p:last-child{ margin-bottom:0; }
.cs-note .is-small{ font-size:13px; color:var(--text-faint); }
@media (max-width:760px){ .cs-note{ grid-template-columns:1fr; gap:10px; } }

/* =====================================================================
   THE LESSON PAGE  (/lesson.php)

   A tutorial page, not a dashboard. The rules it follows:

     · the article is the page. Everything else is navigation, and
       navigation is text, not cards.
     · one border style, one radius, no shadows, no gradients. A box only
       appears where something really is a separate object — a code block,
       a callout.
     · the left column is a table of contents. The right column is a list
       of the headings on this page. Neither may look like a panel.
     · red marks position and action. Green says free or finished. Blue
       belongs to code. Nothing else is coloured.
   ===================================================================== */
.ls{
  --ls-read:820px;
  display:grid; grid-template-columns:250px minmax(0,1fr) 210px;
  gap:40px; max-width:1420px; margin:0 auto; padding:26px 28px 56px;
  align-items:start;
}
@media (max-width:1180px){ .ls{ grid-template-columns:240px minmax(0,1fr); gap:32px; } }
@media (max-width:900px){ .ls{ grid-template-columns:minmax(0,1fr); gap:0; padding:16px 16px 40px; } }

/* how much of the lesson is left — one hairline, no chrome */
.ls-bar{ position:fixed; left:0; right:0; height:2px; z-index:60; pointer-events:none; }
.ls-bar span{ display:block; height:100%; width:0; background:var(--blue); }

/* ------------------------------------------------------ left: contents */
.ls-side{ position:sticky; top:calc(var(--lp-top,64px) + 20px);
  max-height:calc(100vh - var(--lp-top,64px) - 40px); overflow:auto;
  font-size:13.5px; }
@media (max-width:900px){ .ls-side{ position:static; max-height:none; } }

.ls-up{ display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  font-size:12.5px; color:var(--text-faint); text-decoration:none; }
.ls-up .fh-i{ transform:rotate(180deg); }
.ls-up:hover{ color:var(--blue); }

.ls-course{ display:block; font-size:15px; font-weight:700; line-height:1.35;
  color:inherit; text-decoration:none; }
.ls-course:hover{ color:var(--blue); }
.ls-course + p{ margin:4px 0 0; font-size:12px; color:var(--text-faint); }

.ls-prog{ margin:16px 0 14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.ls-prog-k{ display:flex; justify-content:space-between; font-size:12px;
  color:var(--text-faint); margin-bottom:6px; }
.ls-prog-k b{ color:var(--text-dim); font-weight:600; }
.ls-prog-t{ height:4px; border-radius:2px; background:var(--surface-2); overflow:hidden; }
.ls-prog-t i{ display:block; height:100%; background:var(--blue); }

/* The list is a list: a number, a title, and nothing else until something
   needs saying. Finished lessons carry a tick, locked ones a lock. */
.ls-toc{ list-style:none; margin:0; padding:0; }
.ls-toc a{ display:flex; gap:9px; padding:7px 0; line-height:1.45;
  color:var(--text-dim); text-decoration:none; }
.ls-toc a:hover{ color:var(--blue); }
.ls-toc i{ flex:0 0 16px; font-style:normal; font-variant-numeric:tabular-nums;
  color:var(--text-faint); text-align:right; }
.ls-toc li.ok i{ color:var(--green-fill,#2f6b34); }
.ls-toc li.on a{ color:var(--blue); font-weight:650; }
.ls-toc li.on i{ color:var(--blue); }
.ls-toc .ls-lock{ margin-left:auto; flex:none; opacity:.55; }

/* --------------------------------------------------------- centre: text */
.ls-main{ min-width:0; max-width:var(--ls-read); }

.ls-crumb{ font-size:12.5px; color:var(--text-faint); margin:0 0 10px; }
.ls-crumb a{ color:var(--text-faint); text-decoration:none; }
.ls-crumb a:hover{ color:var(--blue); text-decoration:underline; }

.ls-h1{ margin:0; font-size:clamp(26px,3vw,34px); line-height:1.2; letter-spacing:-.02em; }
.ls-sum{ margin:10px 0 0; font-size:16.5px; line-height:1.6; color:var(--text-dim); }
.ls-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 0;
  font-size:13px; color:var(--text-faint); }
.ls-meta .dot{ color:var(--border-strong,#cfc8ca); }
.ls-meta .free{ color:var(--green-fill,#2f6b34); font-weight:650; }
.ls-meta .pro{ color:var(--amber-text,#8a5a00); font-weight:650; }

.ls-mark{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
  margin-top:16px; border:1px solid var(--blue); border-radius:6px;
  background:var(--surface); color:var(--blue); font-size:13.5px; font-weight:650;
  cursor:pointer; }
.ls-mark:hover{ background:var(--blue-tint); }
.ls-mark.is-done{ border-color:var(--green-fill,#2f6b34); color:var(--green-fill,#2f6b34);
  background:var(--green-tint,#eef7f0); }

.ls-rule{ height:1px; background:var(--border); margin:22px 0 26px; }

/* ------------------------------------------------------------- article */
.ls-art{ font-size:17px; line-height:1.72; }
.ls-art p{ margin:0 0 18px; }
.ls-art > h2{ margin:34px 0 12px; font-size:24px; line-height:1.3; letter-spacing:-.02em;
  padding-bottom:7px; border-bottom:1px solid var(--border); }
.ls-art > h3{ margin:30px 0 10px; font-size:24px; line-height:1.3; letter-spacing:-.02em;
  padding-bottom:7px; border-bottom:1px solid var(--border); }
.ls-art > h4, .ls-art > h5{ margin:24px 0 8px; font-size:18.5px; font-weight:650; }
.ls-art > *:first-child{ margin-top:0; }
.ls-art ul, .ls-art ol{ margin:0 0 18px; padding-left:22px; }
.ls-art li{ margin-bottom:8px; }
.ls-art li::marker{ color:var(--blue); }
.ls-art strong{ font-weight:650; }
.ls-art a{ color:var(--blue); text-underline-offset:2px; }
.ls-art hr{ margin:30px 0; border:0; border-top:1px solid var(--border); }
.ls-art blockquote{ margin:22px 0; padding-left:16px; color:var(--text-dim);
  border-left:3px solid var(--border-strong,#dcd5d6); }
.ls-art code{ font-size:.93em; }
.ls-art .table-wrap{ overflow-x:auto; margin:0 0 20px; }
.ls-art table{ font-size:15px; }
.ls-art .codeblock{ margin:20px 0; border-radius:8px; }
.ls-art .codeblock-pre{ overflow-x:auto; }
/* One box style for the one thing that is genuinely an aside. */
.ls-art .callout{ margin:22px 0; border-radius:8px; border-width:1px;
  border-left-width:4px; background:var(--surface); }

/* ---------------------------------------------------------- end of page */
.ls-foot{ margin-top:34px; padding-top:20px; border-top:1px solid var(--border); }
.ls-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:620px){ .ls-nav{ grid-template-columns:1fr; } }
.ls-nav a{ display:block; padding:12px 14px; border:1px solid var(--border);
  border-radius:8px; text-decoration:none; color:inherit; }
.ls-nav a:hover{ border-color:var(--blue); }
.ls-nav small{ display:block; font-size:11.5px; color:var(--text-faint); margin-bottom:3px; }
.ls-nav b{ font-size:14px; font-weight:650; line-height:1.4; }
.ls-nav .next{ text-align:right; }
.ls-nav .next b{ color:var(--blue); }
.ls-extra{ display:flex; flex-wrap:wrap; gap:14px; margin-top:16px;
  font-size:12.5px; color:var(--text-faint); }
.ls-extra button, .ls-extra a{ background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--text-faint); text-decoration:underline;
  text-underline-offset:3px; }
.ls-extra button:hover, .ls-extra a:hover{ color:var(--blue); }

/* --------------------------------------------------------- right: quiet */
.ls-aside{ position:sticky; top:calc(var(--lp-top,64px) + 20px); font-size:12.8px; }
@media (max-width:1180px){ .ls-aside{ display:none; } }
@media (max-width:900px){ .ls-aside{ display:block; position:static; margin-top:28px;
  padding-top:20px; border-top:1px solid var(--border); } }
.ls-k{ font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 9px; }
.ls-onpage{ display:flex; flex-direction:column; border-left:1px solid var(--border); }
.ls-onpage a{ padding:5px 0 5px 12px; margin-left:-1px; line-height:1.45;
  border-left:1px solid transparent; color:var(--text-faint); text-decoration:none; }
.ls-onpage a:hover{ color:var(--text-dim); }
.ls-onpage a.on{ color:var(--blue); border-left-color:var(--blue); font-weight:650; }
.ls-onpage a.d1{ padding-left:22px; }
.ls-side2{ margin-top:24px; }
.ls-side2 a{ display:block; color:inherit; text-decoration:none; line-height:1.45; }
.ls-side2 a:hover{ color:var(--blue); }
.ls-side2 b{ font-weight:650; }

/* -------------------------------------------------------------- paywall */
.ls-wall{ position:relative; margin-top:-60px; }
.ls-wall-fade{ height:110px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg) 88%); }
.ls-wall-card{ border:1px solid var(--blue); border-radius:8px; padding:20px;
  background:var(--surface); }
.ls-wall-card b{ display:block; font-size:17px; margin-bottom:8px; }
.ls-wall-card p{ margin:0 0 12px; font-size:14.5px; line-height:1.65; color:var(--text-dim); }
.ls-wall-card .lp-btn{ margin-top:4px; }
.ls-wall-card .small{ margin:12px 0 0; font-size:13px; color:var(--text-faint); }

/* ------------------------------------------------------------- printing */
@media print{
  .ls-side, .ls-aside, .ls-bar, .ls-foot, .ls-mark, .ls-crumb,
  .lp-top, .promo-strip, .footer, .hp{ display:none !important; }
  .ls{ display:block; max-width:none; padding:0; }
  .ls-main{ max-width:none; }
  .ls-art{ font-size:11.5pt; line-height:1.55; }
  .codeblock{ break-inside:avoid; border:1px solid #ccc; }
  .codeblock-bar{ display:none; }
}

/* The contents column is a <details>: a dropdown on a phone, a plain
   column on a desktop, one piece of markup for both. */
.ls-side > summary{ display:none; }
@media (max-width:900px){
  .ls-side{ border:1px solid var(--border); border-radius:8px; padding:0 14px;
    margin-bottom:22px; }
  .ls-side[open]{ padding-bottom:14px; }
  .ls-side > summary{ display:flex; align-items:center; gap:9px; padding:13px 0;
    font-size:14px; font-weight:650; cursor:pointer; list-style:none; }
  .ls-side > summary::-webkit-details-marker{ display:none; }
  .ls-side > summary span{ margin-left:auto; font-weight:600; font-size:12.5px;
    color:var(--text-faint); }
  .ls-side > .ls-up{ margin-top:4px; }
}

/* What the program printed. Deliberately not the same box as the code:
   a tutorial that shows both in identical black panels makes the reader
   work out which one is which every single time. */
.outblock{ margin:0 0 20px; border:1px solid var(--border); border-left:3px solid var(--blue);
  border-radius:8px; background:var(--surface-2); overflow:hidden; }
.outblock-k{ display:block; padding:7px 14px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
  border-bottom:1px solid var(--border); background:var(--surface); }
.outblock pre{ margin:0; padding:13px 14px; overflow-x:auto;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.5px; line-height:1.6;
  color:var(--text); white-space:pre; }
.ls-art .outblock{ margin:20px 0; }

/* =====================================================================
   MOCK TESTS  (/tests.php)

   Forty papers as cards is a scroll; forty papers as rows is a table of
   contents. So this page is a list: one line per paper, the same five
   things in the same five places every time — name, what it costs you in
   time, your last score, and the button that starts it.
   ===================================================================== */
.tl{ display:flex; flex-direction:column; gap:26px; max-width:1000px; }

.tl-head h1{ margin:0; font-size:clamp(26px,3vw,34px); line-height:1.2; letter-spacing:-.02em; }
.tl-head p{ margin:10px 0 0; font-size:16px; line-height:1.65; color:var(--text-dim);
  max-width:64ch; }
.tl-counts{ font-size:13.5px !important; color:var(--text-faint) !important; }
.tl-counts b{ color:var(--text-dim); font-weight:650; }
.tl-counts span{ color:var(--border-strong,#cfc8ca); margin:0 4px; }

/* A notice is a line with a mark against it, not a coloured box. */
.tl-note{ margin:0; padding:11px 14px; border-left:3px solid var(--border-strong,#cfc8ca);
  background:var(--surface-2); border-radius:0 6px 6px 0;
  font-size:13.8px; line-height:1.6; color:var(--text-dim); }
.tl-note b{ color:var(--text); font-weight:650; }
.tl-note.is-ok{ border-left-color:var(--green-fill,#2f6b34); }
.tl-note.is-warn{ border-left-color:var(--amber,#e0a100); }
.tl-note.is-live{ display:block; text-decoration:none; border-left-color:var(--blue);
  background:var(--blue-tint); }
.tl-note.is-live b{ display:block; color:var(--blue); }
.tl-note.is-live span{ font-size:13px; color:var(--text-dim); }

.tl-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tl-chip{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px;
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
  color:var(--text-dim); font-size:13px; font-weight:600; text-decoration:none; }
.tl-chip span{ color:var(--text-faint); font-weight:600; font-variant-numeric:tabular-nums; }
.tl-chip:hover{ border-color:var(--blue); color:var(--blue); }
.tl-chip.on{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }
.tl-chip.on span{ color:var(--blue); }
.tl-sep{ width:1px; height:20px; background:var(--border); margin:0 3px; }

.tl-sec h2{ margin:0; font-size:18px; letter-spacing:-.015em;
  display:flex; align-items:baseline; gap:9px; }
.tl-sec h2 em{ font-style:normal; font-size:12.5px; font-weight:600; color:var(--text-faint); }
.tl-blurb{ margin:6px 0 0; font-size:13.5px; line-height:1.6; color:var(--text-faint);
  max-width:74ch; }

/* Past attempts: the same row shape, narrower, read-only. */
.tl-past{ margin-top:12px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); overflow:hidden; }
.tl-past a{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:16px;
  align-items:center; padding:11px 16px; border-top:1px solid var(--border-soft);
  text-decoration:none; color:inherit; font-size:13.5px; }
.tl-past a:first-child{ border-top:0; }
.tl-past a:hover{ background:var(--surface-2); }
.tl-past b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-past .when{ font-size:12.5px; color:var(--text-faint); white-space:nowrap; }
.tl-past .sc{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tl-past .sc.ok{ color:var(--green-fill,#2f6b34); }
.tl-past .sc.mid{ color:var(--amber-text,#8a5a00); }
.tl-past .sc.low{ color:var(--blue); }
.tl-past .rev{ font-size:12.5px; color:var(--blue); white-space:nowrap; }

.tl-empty{ padding:26px; text-align:center; border:1px dashed var(--border-strong,#dcd5d6);
  border-radius:10px; color:var(--text-faint); font-size:14px; }

.tl-help{ padding-top:20px; border-top:1px solid var(--border); }
.tl-help h2{ margin:0 0 10px; font-size:17px; letter-spacing:-.015em; }
.tl-help p{ margin:0 0 12px; font-size:14.5px; line-height:1.7; color:var(--text-dim);
  max-width:76ch; }
.tl-help p:last-child{ margin-bottom:0; }
.tl-help b{ color:var(--text); font-weight:650; }

/* On a phone the row folds: name and summary, then the numbers, then the
   button across the full width where a thumb can reach it. */
/* On a phone the four columns become one wrapping line: the name takes
   the full width, then the numbers, the score and the button share the
   row under it with the button pushed to the thumb side. */
@media (max-width:820px){
  .tl-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
  .tl-main{ flex:0 0 100%; }
  .tl-score{ min-width:0; text-align:left; display:flex; align-items:baseline; gap:6px; }
  .tl-best{ display:inline; font-size:14px; }
  .tl-go{ margin-left:auto; }
  .tl-past a{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
  .tl-past b{ flex:0 0 100%; white-space:normal; }
  .tl-past .rev{ margin-left:auto; }
}

/* ------------------------------------------------- mock tests as cards */
/* Same card language as the course catalogue, so a student who has used
   one page already knows this one. The motion is the site's own reveal
   (.lp-rv) — it starts below the fold and is off entirely for anybody who
   has asked for reduced motion. */
.tc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:18px; margin-top:14px; }
@media (min-width:1480px){ .tc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.tc{ display:flex; flex-direction:column; padding:20px; border-radius:14px;
  border:1px solid var(--border); background:var(--surface); color:inherit;
  text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tc:hover{ border-color:var(--blue); box-shadow:var(--e2); transform:translateY(-2px);
  text-decoration:none; }
.tc:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.tc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tc-tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tc-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.tc-tag.pro{ background:var(--amber-tint,#fff6da); color:var(--amber-text,#8a5a00); }
.tc-tag.hard{ background:var(--surface-2); color:var(--text-faint); }
.tc-tag.soon{ background:var(--surface-2); color:var(--text-dim); }
.tc-tag.live{ background:var(--blue-tint); color:var(--blue); }
.tc-tag.live i{ width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:hz-pulse 1.6s ease-in-out infinite; }

.tc-best{ display:inline-flex; align-items:center; height:24px; padding:0 9px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:750;
  font-variant-numeric:tabular-nums; }
.tc-best.ok{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }
.tc-best.mid{ background:var(--amber-tint,#fff6da); color:var(--amber-text,#8a5a00); }
.tc-best.low{ background:var(--blue-tint); color:var(--blue); }

.tc h3{ margin:15px 0 0; font-size:16.5px; font-weight:700; line-height:1.32;
  letter-spacing:-.015em; }
.tc p{ margin:7px 0 0; font-size:13.4px; line-height:1.6; color:var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* margin-top:auto pins the footer of every card to the bottom, so the
   buttons line up across a row however long the summaries are. */
.tc-meta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:auto; padding-top:15px;
  font-size:12.4px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.tc-meta span{ display:inline-flex; align-items:center; gap:5px; }
.tc-meta .coin{ color:var(--amber-text,#8a5a00); font-weight:650; }

.tc-go{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--border-soft);
  font-size:13.5px; font-weight:700; color:var(--blue); }
.tc-go .fh-i{ transition:transform .16s ease; }
.tc:hover .tc-go .fh-i{ transform:translateX(4px); }
.tc-tries{ margin-top:7px; font-size:11.5px; color:var(--text-faint); }

.tc.is-locked h3{ color:var(--text-dim); }
.tc.is-locked .tc-go{ color:var(--text-faint); }
.tc.is-live{ border-color:var(--blue); }

@media (prefers-reduced-motion: reduce){
  .tc, .tc-go .fh-i{ transition:none; }
  .tc:hover{ transform:none; }
  .tc-tag.live i{ animation:none; }
}

/* =====================================================================
   PRACTICE  (/practice.php)

   A grid of problems, each one carrying its own state. The three states
   are the page: solved (green tick), started but not solved (amber), and
   untouched. Somebody scanning is looking for the second and third kind,
   so those are what the eye finds first.
   ===================================================================== */
.pr2{ display:flex; flex-direction:column; gap:22px; max-width:1180px; }

.pr2-head h1{ margin:0; font-size:clamp(26px,3vw,34px); line-height:1.2; letter-spacing:-.02em; }
.pr2-head p{ margin:10px 0 0; font-size:16px; line-height:1.65; color:var(--text-dim);
  max-width:66ch; }

/* ------------------------------------------------------- the progress */
.pr2-prog{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,1.5fr) auto;
  gap:24px; align-items:center; padding:18px 20px; border-radius:14px;
  border:1px solid var(--border); background:var(--surface); }
@media (max-width:980px){ .pr2-prog{ grid-template-columns:minmax(0,1fr); gap:16px; } }

.pr2-prog-main b{ font-size:16px; font-weight:700; }
.pr2-prog-main span{ float:right; font-size:13px; color:var(--text-faint);
  font-variant-numeric:tabular-nums; }
.pr2-bar{ height:6px; margin-top:9px; border-radius:3px; background:var(--surface-2);
  overflow:hidden; }
.pr2-bar i{ display:block; height:100%; border-radius:3px; background:var(--blue);
  transition:width .4s cubic-bezier(.22,1,.36,1); }
.pr2-bar.sm{ height:4px; margin-top:7px; }

.pr2-split{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pr2-one .k{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); }
.pr2-one .v{ float:right; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.pr2-one .v small{ font-weight:600; color:var(--text-faint); }
.pr2-one.easy .pr2-bar i{ background:var(--green-fill,#2f6b34); }
.pr2-one.medium .pr2-bar i{ background:var(--amber,#e0a100); }
.pr2-one.hard .pr2-bar i{ background:var(--blue); }

.pr2-next{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:11px;
  background:var(--blue-tint); color:var(--blue); text-decoration:none; max-width:280px;
  transition:transform .16s ease; }
.pr2-next:hover{ transform:translateX(2px); color:var(--blue); }
.pr2-next small{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); }
.pr2-next b{ display:block; font-size:13.5px; font-weight:700; line-height:1.35; }
.pr2-next .fh-i{ margin-left:auto; flex:none; }

.pr2-note{ margin:0; padding:11px 14px; border-left:3px solid var(--border-strong,#cfc8ca);
  background:var(--surface-2); border-radius:0 6px 6px 0; font-size:13.8px; line-height:1.6;
  color:var(--text-dim); }

/* -------------------------------------------------------- the filters */
.pr2-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pr2-chip{ display:inline-flex; align-items:center; gap:6px; height:33px; padding:0 14px;
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
  color:var(--text-dim); font-size:13px; font-weight:600; text-decoration:none;
  transition:border-color .13s, color .13s, background .13s; }
.pr2-chip span{ color:var(--text-faint); font-variant-numeric:tabular-nums; }
.pr2-chip:hover{ border-color:var(--blue); color:var(--blue); }
.pr2-chip.on{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }
.pr2-chip.on span{ color:var(--blue); }
/* The three difficulties keep their colours when chosen, so the filter
   agrees with the badges on the cards below it. */
.pr2-chip.easy.on{ background:var(--green-tint,#e8f5ec); border-color:var(--green-fill,#2f6b34);
  color:var(--green-fill,#2f6b34); }
.pr2-chip.medium.on{ background:var(--amber-tint,#fff6da); border-color:var(--amber,#e0a100);
  color:var(--amber-text,#8a5a00); }
.pr2-chip.easy.on span, .pr2-chip.medium.on span{ color:inherit; }
.pr2-sep{ width:1px; height:20px; background:var(--border); margin:0 3px; }

/* ---------------------------------------------------------- the cards */
.pc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:16px; }
@media (min-width:1480px){ .pc-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.pc{ display:flex; flex-direction:column; padding:18px; border-radius:14px;
  border:1px solid var(--border); background:var(--surface); color:inherit;
  text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.pc:hover{ border-color:var(--blue); box-shadow:var(--e2); transform:translateY(-2px);
  text-decoration:none; }
.pc:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.pc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pc-n{ display:grid; place-items:center; width:28px; height:28px; border-radius:9px;
  background:var(--surface-2); color:var(--text-faint);
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.pc-diff{ padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700;
  letter-spacing:.04em; }
.pc-diff.easy{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }
.pc-diff.medium{ background:var(--amber-tint,#fff6da); color:var(--amber-text,#8a5a00); }
.pc-diff.hard{ background:var(--red-tint,#fceceb); color:var(--blue); }

.pc h3{ margin:14px 0 0; font-size:15.5px; font-weight:650; line-height:1.4;
  letter-spacing:-.01em; }
.pc-track{ display:flex; align-items:center; gap:6px; margin:7px 0 0; font-size:12.2px;
  color:var(--text-faint); }
.pc-track .fh-i{ flex:none; }

.pc-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:14px; font-size:12.3px; }
.pc-solved{ color:var(--text-faint); font-variant-numeric:tabular-nums; }
.pc-state{ display:inline-flex; align-items:center; gap:5px; font-weight:700; }
.pc-state.go{ color:var(--blue); }
.pc-state.go .fh-i{ transition:transform .16s ease; }
.pc:hover .pc-state.go .fh-i{ transform:translateX(3px); }
.pc-state.done{ color:var(--green-fill,#2f6b34); }
.pc-state.part{ color:var(--amber-text,#8a5a00); }

/* The state is on the card's edge as well as in its footer, so a grid can
   be read at a glance without reading a word of it. */
.pc.is-done{ border-color:rgba(47,107,52,.35); background:linear-gradient(
  180deg, var(--green-tint,#e8f5ec) 0, var(--surface) 46px); }
.pc.is-done .pc-n{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }
.pc.is-part{ border-color:rgba(224,163,0,.4); }
.pc.is-part .pc-n{ background:var(--amber-tint,#fff6da); color:var(--amber-text,#8a5a00); }

.pr2-empty{ padding:30px; text-align:center; border:1px dashed var(--border-strong,#dcd5d6);
  border-radius:12px; color:var(--text-faint); font-size:14.5px; }

.pr2-help{ padding-top:22px; border-top:1px solid var(--border); }
.pr2-help h2{ margin:0 0 10px; font-size:17px; letter-spacing:-.015em; }
.pr2-help p{ margin:0 0 12px; font-size:14.5px; line-height:1.7; color:var(--text-dim);
  max-width:76ch; }
.pr2-help-go{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

@media (prefers-reduced-motion: reduce){
  .pc, .pc-state.go .fh-i, .pr2-next, .pr2-bar i{ transition:none; }
  .pc:hover{ transform:none; }
}

/* =====================================================================
   PLACEMENT PLANNER  (/placement.php)

   A four-year plan is long by definition, so the page's job is to make it
   feel finishable: progress per year rather than one number, the next
   three things pulled to the top, and a tick that is a real control with
   a real result.
   ===================================================================== */
.rm{ display:flex; flex-direction:column; gap:24px; max-width:1080px; }

.rm-kicker{ margin:0; font-size:11.5px; font-weight:750; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); }
.rm-head h1{ margin:10px 0 0; font-size:clamp(26px,3vw,34px); line-height:1.2;
  letter-spacing:-.02em; }
.rm-head p{ margin:12px 0 0; font-size:16px; line-height:1.65; color:var(--text-dim);
  max-width:66ch; }

.rm-note{ margin:0; padding:12px 15px; border-left:3px solid var(--amber,#e0a100);
  background:var(--amber-tint,#fff6da); border-radius:0 8px 8px 0;
  font-size:14px; line-height:1.6; color:var(--text-dim); }

/* ------------------------------------------------------- progress ---- */
.rm-prog{ padding:20px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); }
.rm-prog-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.rm-prog-top > div:first-child{ flex:1 1 auto; min-width:0; }
.rm-prog-top b{ font-size:17px; font-weight:700; }
.rm-prog-top > div:first-child span{ float:right; font-size:13px; color:var(--text-faint);
  font-variant-numeric:tabular-nums; }
.rm-bar{ height:7px; margin-top:10px; border-radius:4px; background:var(--surface-2);
  overflow:hidden; }
.rm-bar i{ display:block; height:100%; border-radius:4px; background:var(--blue);
  transition:width .45s cubic-bezier(.22,1,.36,1); }
.rm-bar.sm{ height:4px; margin-top:8px; }
.rm-bar.phase{ margin:14px 0 0; height:5px; }

.rm-level{ flex:none; text-align:right; }
.rm-level small{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); }
.rm-level b{ display:block; font-size:22px; font-weight:750; line-height:1.15; color:var(--blue); }
.rm-level span{ font-size:12px; color:var(--text-faint); }

.rm-years{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--border-soft); }
@media (max-width:760px){ .rm-years{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.rm-year{ display:block; padding:11px 13px; border-radius:11px; border:1px solid var(--border);
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.rm-year:hover{ border-color:var(--blue); transform:translateY(-1px); }
.rm-year .k{ font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--text-faint); }
.rm-year .v{ float:right; font-size:13.5px; font-weight:750; font-variant-numeric:tabular-nums; }
.rm-year .v small{ font-weight:600; color:var(--text-faint); }
.rm-year.is-done{ border-color:rgba(47,107,52,.4); background:var(--green-tint,#eef7f0); }
.rm-year.is-done .rm-bar i{ background:var(--green-fill,#2f6b34); }

/* ----------------------------------------------------- do these next - */
.rm-next{ padding:18px 20px; border-radius:14px; border:1px solid var(--blue);
  background:var(--blue-tint); }
.rm-next h2{ display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:14px; font-weight:750; letter-spacing:.02em; color:var(--blue); }
.rm-next-list{ display:flex; flex-direction:column; gap:8px; }
.rm-next-row{ display:flex; align-items:center; gap:12px; padding:11px 13px;
  border-radius:10px; background:var(--surface); }
.rm-next-row > div{ flex:1 1 auto; min-width:0; }
.rm-next-row b{ display:block; font-size:14px; font-weight:650; line-height:1.4; }
.rm-next-row small{ font-size:11.5px; color:var(--text-faint); }
.rm-next-row form{ margin:0; flex:none; }

/* The tick. A circle that fills, not a button that says "done". */
.rm-tick{ width:26px; height:26px; flex:none; border-radius:50%; cursor:pointer;
  border:2px solid var(--border-strong,#cfc8ca); background:var(--surface);
  display:grid; place-items:center; color:#fff; padding:0;
  transition:border-color .15s, background .15s, transform .15s; }
.rm-tick:hover{ border-color:var(--blue); transform:scale(1.08); }
.rm-tick.on{ border-color:var(--green-fill,#2f6b34); background:var(--green-fill,#2f6b34); }
.rm-tick.is-flat{ cursor:default; }
.rm-tick:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.rm-open{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  font-weight:650; color:var(--blue); text-decoration:none; }
.rm-open .fh-i{ transition:transform .15s ease; }
.rm-open:hover .fh-i{ transform:translateX(3px); }

/* ---------------------------------------------------------- a phase -- */
.rm-phase{ padding:22px; border-radius:16px; border:1px solid var(--border);
  background:var(--surface); scroll-margin-top:90px; }
.rm-phase-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.rm-badge{ padding:4px 11px; border-radius:var(--radius-pill); background:var(--blue-tint);
  color:var(--blue); font-size:11.5px; font-weight:700; }
.rm-phase-head h2{ margin:0; font-size:19px; letter-spacing:-.015em; flex:1 1 auto;
  display:flex; align-items:center; gap:9px; }
.rm-phase-head h2 i{ font-style:normal; }
.rm-count{ flex:none; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text-dim);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.rm-count.is-done{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }
.rm-phase-sum{ margin:12px 0 0; font-size:14.5px; line-height:1.65; color:var(--text-dim);
  max-width:80ch; }

.rm-tasks{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.rm-task{ display:flex; align-items:flex-start; gap:13px; padding:15px;
  border-radius:12px; border:1px solid var(--border); background:var(--surface);
  transition:border-color .15s ease, transform .15s ease, background .15s ease; }
.rm-task:hover{ border-color:var(--blue); transform:translateY(-1px); }
.rm-task form{ margin:0; flex:none; }
.rm-task-body{ flex:1 1 auto; min-width:0; }
.rm-task-body b{ display:block; font-size:15px; font-weight:650; line-height:1.45; }
.rm-task-body p{ margin:5px 0 0; font-size:13.4px; line-height:1.6; color:var(--text-dim);
  max-width:78ch; }
.rm-task-body .rm-open{ margin-top:8px; }
.rm-coin{ flex:none; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--amber-tint,#fff6da); color:var(--amber-text,#8a5a00);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }

/* Done: dimmed, struck through, and green-edged. Still readable — a plan
   you have finished is a record, not a thing to hide. */
.rm-task.is-done{ border-color:rgba(47,107,52,.3); background:var(--green-tint,#f4faf5); }
.rm-task.is-done .rm-task-body b{ text-decoration:line-through; color:var(--text-faint); }
.rm-task.is-done .rm-task-body p{ color:var(--text-faint); }
.rm-task.is-done .rm-coin{ background:var(--surface-2); color:var(--text-faint); }

.rm-honest{ padding-top:22px; border-top:1px solid var(--border); }
.rm-honest h2{ margin:0 0 10px; font-size:17px; letter-spacing:-.015em; }
.rm-honest p{ margin:0 0 12px; font-size:14.5px; line-height:1.72; color:var(--text-dim);
  max-width:78ch; }
.rm-honest p:last-child{ margin-bottom:0; }

@media (max-width:620px){
  .rm-prog-top{ flex-direction:column; gap:14px; }
  .rm-level{ text-align:left; }
  .rm-phase{ padding:18px 15px; }
  .rm-task{ padding:13px; }
}
@media (prefers-reduced-motion: reduce){
  .rm-task, .rm-tick, .rm-year, .rm-bar i, .rm-open .fh-i{ transition:none; }
  .rm-task:hover, .rm-year:hover{ transform:none; }
  .rm-tick:hover{ transform:none; }
}

/* =====================================================================
   COMPANY PAGE  (/company.php)

   This is a page people read, not a page they operate, so it is built
   like the lesson reader: one measured column of writing, a quiet list of
   its own sections beside it, and the facts they came to check pulled to
   the top where they can be seen without scrolling.
   ===================================================================== */
.cmp{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:44px;
  max-width:1200px; margin:0 auto; align-items:start; }
@media (max-width:1060px){ .cmp{ grid-template-columns:minmax(0,1fr); gap:28px; } }
.cmp-main{ min-width:0; max-width:780px; }

.cmp-crumb{ margin:0 0 14px; font-size:12.5px; color:var(--text-faint); }
.cmp-crumb a{ color:var(--text-faint); text-decoration:none; }
.cmp-crumb a:hover{ color:var(--blue); text-decoration:underline; }

.cmp-head{ display:flex; align-items:center; gap:16px; }
.cmp-head h1{ margin:0; font-size:clamp(27px,3.2vw,36px); line-height:1.15;
  letter-spacing:-.025em; }
.cmp-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.cmp-chip{ padding:3px 11px; border-radius:var(--radius-pill); background:var(--surface-2);
  color:var(--text-dim); font-size:11.5px; font-weight:650; }
.cmp-chip.is-mass{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }
.cmp-chip.is-sel{ background:var(--amber-tint,#fff6da); color:var(--amber-text,#8a5a00); }

.cmp-lede{ margin:18px 0 0; font-size:17.5px; line-height:1.62; color:var(--text-dim);
  max-width:62ch; }

/* The facts strip. Four labels in four fixed places, so somebody who has
   read one company page knows where to look on the next one. */
.cmp-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:24px 0 0; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); overflow:hidden; }
.cmp-facts > div{ padding:13px 15px; background:var(--surface);
  border-left:1px solid var(--border); }
.cmp-facts > div:first-child{ border-left:0; }
.cmp-facts span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; }
.cmp-facts b{ font-size:13.8px; font-weight:650; line-height:1.4; }
.cmp-facts a{ color:var(--blue); text-decoration:none; display:inline-flex; align-items:center;
  gap:5px; }
.cmp-facts a:hover{ text-decoration:underline; }

.cmp-warn{ margin:16px 0 0; padding:11px 15px; border-left:3px solid var(--amber,#e0a100);
  background:var(--amber-tint,#fff8e4); border-radius:0 8px 8px 0;
  font-size:13.6px; line-height:1.65; color:var(--text-dim); }
.cmp-warn a{ color:var(--amber-text,#8a5a00); font-weight:650; }

/* ------------------------------------------------------- the writing */
.cmp-sec{ margin-top:40px; }
.cmp-sec h2{ display:flex; align-items:center; gap:12px; margin:0 0 16px;
  font-size:22px; letter-spacing:-.02em; padding-bottom:10px;
  border-bottom:1px solid var(--border); scroll-margin-top:90px; }
.cmp-sec h2 i{ flex:none; display:grid; place-items:center; width:27px; height:27px;
  border-radius:50%; background:var(--blue); color:#fff;
  font-style:normal; font-size:13px; font-weight:750; }

/* Reading type, same measure and rhythm as a lesson. */
.cmp-md{ font-size:16.5px; line-height:1.75; }
.cmp-md p{ margin:0 0 16px; }
.cmp-md > *:last-child{ margin-bottom:0; }
.cmp-md h3, .cmp-md h4{ margin:26px 0 8px; font-size:16.5px; font-weight:700;
  letter-spacing:-.01em; }
.cmp-md h3:first-child, .cmp-md h4:first-child{ margin-top:0; }
.cmp-md ul, .cmp-md ol{ margin:0 0 16px; padding-left:22px; }
.cmp-md li{ margin-bottom:8px; }
.cmp-md li::marker{ color:var(--blue); }
.cmp-md strong{ font-weight:700; }
.cmp-md a{ color:var(--blue); }
.cmp-md code{ font-size:.92em; }
.cmp-md table{ font-size:14.5px; }
.cmp-md .table-wrap{ overflow-x:auto; margin:0 0 16px; }

.cmp-empty{ margin-top:32px; padding:28px; text-align:center; font-size:14.5px;
  color:var(--text-faint); border:1px dashed var(--border-strong,#dcd5d6); border-radius:12px; }

.cmp-cta{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border); }
.cmp-cta h2{ margin:0 0 8px; font-size:18px; letter-spacing:-.015em; }
.cmp-cta p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--text-dim); max-width:66ch; }
.cmp-cta-go{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* ---------------------------------------------------------- the aside */
.cmp-aside{ position:sticky; top:calc(var(--lp-top,64px) + 20px);
  display:flex; flex-direction:column; gap:18px; }
@media (max-width:1060px){ .cmp-aside{ position:static; } }
.cmp-k{ margin:0 0 10px; font-size:10.5px; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint); }
.cmp-box{ font-size:13px; }

.cmp-toc{ display:flex; flex-direction:column; border-left:1px solid var(--border); }
.cmp-toc a{ padding:6px 0 6px 13px; margin-left:-1px; border-left:1px solid transparent;
  color:var(--text-faint); text-decoration:none; line-height:1.45; }
.cmp-toc a:hover{ color:var(--text-dim); }
.cmp-toc a.on{ color:var(--blue); border-left-color:var(--blue); font-weight:650; }

.cmp-tests{ display:flex; flex-direction:column; gap:2px; }
.cmp-tests a{ display:block; padding:9px 10px; border-radius:9px; text-decoration:none;
  color:inherit; transition:background .14s ease; }
.cmp-tests a:hover{ background:var(--surface-2); }
.cmp-tests b{ display:block; font-size:12.8px; font-weight:650; line-height:1.4; }
.cmp-tests small{ display:block; margin-top:2px; font-size:11.3px; color:var(--text-faint); }

.cmp-others{ display:flex; flex-direction:column; gap:2px; }
.cmp-others a{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px;
  text-decoration:none; color:inherit; font-size:13px; font-weight:600;
  transition:background .14s ease; }
.cmp-others a:hover{ background:var(--surface-2); color:var(--blue); }
.cmp-others span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.cmp-others .fh-i{ color:var(--text-faint); flex:none; }
.cmp-others a:hover .fh-i{ color:var(--blue); }

/* =====================================================================
   COMPANY INDEX  (/companies.php)
   ===================================================================== */
.cy{ display:flex; flex-direction:column; gap:26px; max-width:1180px; }
.cy-head h1{ margin:10px 0 0; font-size:clamp(26px,3vw,34px); line-height:1.2;
  letter-spacing:-.02em; }
.cy-head p{ margin:12px 0 0; font-size:16px; line-height:1.65; color:var(--text-dim);
  max-width:68ch; }

.cy-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.cy-sec h2{ margin:0 0 4px; font-size:17px; letter-spacing:-.015em;
  display:flex; align-items:baseline; gap:9px; }
.cy-sec h2 em{ font-style:normal; font-size:12.5px; font-weight:600; color:var(--text-faint); }
.cy-sec p.note{ margin:0 0 14px; font-size:13.5px; color:var(--text-faint); }

.cy-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
@media (min-width:1440px){ .cy-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cy-card{ display:flex; flex-direction:column; padding:18px; border-radius:14px;
  border:1px solid var(--border); background:var(--surface); color:inherit;
  text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.cy-card:hover{ border-color:var(--blue); box-shadow:var(--e2); transform:translateY(-2px);
  text-decoration:none; }
.cy-top{ display:flex; align-items:center; gap:11px; }
.cy-top h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.015em;
  flex:1 1 auto; min-width:0; }
.cy-scale{ flex:none; padding:3px 9px; border-radius:var(--radius-pill); font-size:10.5px;
  font-weight:700; letter-spacing:.04em; }
.cy-scale.mass{ background:var(--green-tint,#e8f5ec); color:var(--green-fill,#2f6b34); }
.cy-scale.sel{ background:var(--amber-tint,#fff6da); color:var(--amber-text,#8a5a00); }
.cy-card p{ margin:12px 0 0; font-size:13.4px; line-height:1.6; color:var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cy-roles{ margin-top:auto; padding-top:14px; font-size:12.2px; color:var(--text-faint); }
.cy-go{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--border-soft); font-size:13px; font-weight:700; color:var(--blue); }
.cy-go .fh-i{ transition:transform .16s ease; }
.cy-card:hover .cy-go .fh-i{ transform:translateX(4px); }

.cy-honest{ padding-top:22px; border-top:1px solid var(--border); }
.cy-honest h2{ margin:0 0 10px; font-size:17px; letter-spacing:-.015em; }
.cy-honest p{ margin:0 0 12px; font-size:14.5px; line-height:1.72; color:var(--text-dim);
  max-width:78ch; }
.cy-honest p:last-child{ margin-bottom:0; }

@media (prefers-reduced-motion: reduce){
  .cy-card, .cy-go .fh-i, .cmp-tests a, .cmp-others a{ transition:none; }
  .cy-card:hover{ transform:none; }
}

/* =====================================================================
   LEADERBOARD  (/leaderboard.php)

   A board of strangers is a list. What makes it a leaderboard is being
   able to find yourself on it and see how far away the next place is —
   so the podium, your own row and the gap to the person above are the
   three things this page is built around.
   ===================================================================== */
.lb2{ display:flex; flex-direction:column; gap:24px; max-width:900px; }
.lb2-head h1{ margin:10px 0 0; font-size:clamp(26px,3vw,34px); line-height:1.2;
  letter-spacing:-.02em; }
.lb2-head p{ margin:12px 0 0; font-size:16px; line-height:1.65; color:var(--text-dim);
  max-width:66ch; }
.lb2-tabs{ display:flex; gap:8px; }

/* ---------------------------------------------------------- podium -- */
.lb2-podium{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  align-items:end; }
/* Stacked, a podium makes no sense: second place cannot sit above first.
   The DOM order is 2-1-3 because that is how a podium is shaped across;
   in one column it is put back into 1-2-3. */
@media (max-width:640px){
  .lb2-podium{ grid-template-columns:1fr; align-items:stretch; }
  .lb2-pod.p1{ order:1; } .lb2-pod.p2{ order:2; } .lb2-pod.p3{ order:3; }
}
.lb2-pod{ position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:22px 16px 18px; border-radius:16px;
  border:1px solid var(--border); background:var(--surface);
  transition:transform .18s ease, box-shadow .18s ease; }
.lb2-pod:hover{ transform:translateY(-3px); box-shadow:var(--e2); }
/* First place stands taller — the one piece of shape on this page that
   carries meaning rather than decoration. */
.lb2-pod.p1{ padding-top:30px; padding-bottom:26px; border-color:var(--amber,#e0a100);
  background:linear-gradient(180deg, var(--amber-tint,#fff6da) 0, var(--surface) 92px); }
.lb2-pod.p2{ border-color:#cfd4da; }
.lb2-pod.p3{ border-color:#e0c3a8; }
.lb2-pod.me{ outline:2px solid var(--blue); outline-offset:-2px; }
@media (max-width:640px){ .lb2-pod.p1{ padding-top:22px; } }

.lb2-place{ position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  min-width:26px; height:26px; padding:0 8px; border-radius:var(--radius-pill);
  display:grid; place-items:center; font-size:12.5px; font-weight:750; color:#fff;
  background:var(--text-dim); }
.lb2-pod.p1 .lb2-place{ background:var(--amber,#e0a100); color:#3a2a00; }
.lb2-pod.p2 .lb2-place{ background:#9aa4ae; }
.lb2-pod.p3 .lb2-place{ background:#c08a5e; }

.lb2-av{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  font-size:17px; font-weight:750; letter-spacing:-.01em; }
.lb2-pod.p1 .lb2-av{ width:62px; height:62px; font-size:20px; }
.lb2-av.sm{ width:36px; height:36px; font-size:12.5px; flex:none; }

.lb2-pod b{ margin-top:11px; font-size:15.5px; font-weight:700; line-height:1.3; }
.lb2-pod small{ margin-top:3px; font-size:12px; color:var(--text-faint); }
.lb2-lvl{ margin-top:9px; padding:2px 9px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text-dim); font-size:11px; font-weight:650; }
.lb2-xp{ margin-top:11px; font-size:18px; font-weight:750; color:var(--amber-text,#8a5a00);
  font-variant-numeric:tabular-nums; }
.lb2-xp i{ font-style:normal; }
.lb2-streak{ margin-top:6px; display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; color:var(--text-faint); }

/* --------------------------------------------------------- your row - */
.lb2-you{ padding:18px 20px; border-radius:14px; border:1px solid var(--blue);
  background:var(--blue-tint); }
.lb2-you-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width:640px){ .lb2-you-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lb2-you-tiles span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; }
.lb2-you-tiles b{ font-size:21px; font-weight:750; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.lb2-you-tiles .coin{ color:var(--amber-text,#8a5a00); }
.lb2-gap{ margin:14px 0 0; padding-top:13px; border-top:1px solid rgba(193,18,31,.15);
  font-size:13.8px; line-height:1.6; color:var(--text-dim); }
.lb2-gap b{ color:var(--blue); font-weight:700; }

/* ---------------------------------------------------------- the list */
.lb2-list{ border:1px solid var(--border); border-radius:14px; background:var(--surface);
  overflow:hidden; }
.lb2-list.is-you{ border-color:var(--blue); }
.lb2-row{ display:grid; grid-template-columns:46px auto minmax(0,1fr) 110px 92px;
  align-items:center; gap:14px; padding:12px 16px;
  border-top:1px solid var(--border-soft); transition:background .14s ease; }
.lb2-row:first-child{ border-top:0; }
.lb2-row:hover{ background:var(--surface-2); }
.lb2-row.me{ background:var(--blue-tint); }
.lb2-rank{ font-size:13.5px; font-weight:700; color:var(--text-faint);
  font-variant-numeric:tabular-nums; }
.lb2-who{ min-width:0; }
.lb2-who b{ display:block; font-size:14.5px; font-weight:650; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb2-who b .lb2-lvl{ display:inline-block; margin:0 0 0 7px; padding:1px 7px;
  font-size:10.5px; vertical-align:1px; }
.lb2-who small{ display:block; margin-top:2px; font-size:11.8px; color:var(--text-faint); }
.lb2-who .fh-i{ vertical-align:-2px; }
.lb2-bar{ height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.lb2-bar i{ display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-soft,#e4576f));
  animation:lb2-grow .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes lb2-grow{ from{ transform:scaleX(0); transform-origin:left; } to{ transform:scaleX(1); } }
.lb2-num{ text-align:right; font-size:14px; font-weight:700;
  color:var(--amber-text,#8a5a00); font-variant-numeric:tabular-nums; }
.lb2-num i{ font-style:normal; }

@media (max-width:760px){
  .lb2-row{ grid-template-columns:38px auto minmax(0,1fr) auto; gap:10px; }
  .lb2-bar{ display:none; }        /* the number says it; the bar needs width */
}

.lb2-empty, .lb2-join{ padding:34px 24px; text-align:center; border-radius:14px;
  border:1px dashed var(--border-strong,#dcd5d6); background:var(--surface); }
.lb2-empty b, .lb2-join b{ display:block; font-size:17px; }
.lb2-empty p, .lb2-join p{ margin:8px auto 16px; max-width:52ch; font-size:14px;
  line-height:1.65; color:var(--text-dim); }

/* --------------------------------------------------------- xp table - */
.lb2-how{ padding-top:22px; border-top:1px solid var(--border); }
.lb2-how h2{ margin:0 0 14px; font-size:17px; letter-spacing:-.015em; }
/* Borders belong to the cells, not to the gaps between them. Drawing them
   as a coloured grid background works only while the last row happens to
   be full — with six items in a five-column row the sixth sat beside a
   long grey rectangle that looked like a broken cell. */
/* Six items, three columns: the rows are always full. An auto-fit grid
   put five in a row and left the sixth beside a long empty rectangle,
   which read as a broken cell rather than as a short last row. */
.lb2-how-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--surface); }
.lb2-how-grid > div{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; background:var(--surface);
  border-top:1px solid var(--border); border-left:1px solid var(--border); }
.lb2-how-grid > div:nth-child(-n+3){ border-top:0; }
.lb2-how-grid > div:nth-child(3n+1){ border-left:0; }
@media (max-width:760px){
  .lb2-how-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lb2-how-grid > div{ border-top:1px solid var(--border); border-left:1px solid var(--border); }
  .lb2-how-grid > div:nth-child(-n+2){ border-top:0; }
  .lb2-how-grid > div:nth-child(2n+1){ border-left:0; }
}
.lb2-how-grid span{ font-size:13.2px; color:var(--text-dim); }
.lb2-how-grid b{ font-size:13.5px; font-weight:750; color:var(--amber-text,#8a5a00);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.lb2-note{ margin:14px 0 0; font-size:13.5px; line-height:1.7; color:var(--text-faint);
  max-width:76ch; }

@media (prefers-reduced-motion: reduce){
  .lb2-pod, .lb2-row{ transition:none; }
  .lb2-pod:hover{ transform:none; }
  .lb2-bar i{ animation:none; }
}

/* =====================================================================
   ONLINE COMPILER  (/compiler.php)

   The editor is the only place on this site that is allowed to be dark:
   people expect code on a dark ground, and the contrast makes syntax and
   typos easier to see. Everything around it stays on the site's own
   light ground so the page still belongs here.
   ===================================================================== */
.ce{
  --ce-bg:#11151f; --ce-bar:#0b0e16; --ce-line:#222838;
  --ce-ink:#e7ebf3; --ce-dim:#8891a6; --ce-gut:#4d5670;
  display:flex; flex-direction:column; gap:22px; max-width:1320px;
}
.ce-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  flex-wrap:wrap; }
.ce-head h1{ margin:0; font-size:clamp(24px,2.6vw,30px); letter-spacing:-.02em; }
.ce-head p{ margin:8px 0 0; font-size:15px; color:var(--text-dim); }
.ce-keys{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-faint); }
.ce-keys kbd{ padding:2px 7px; border-radius:5px; border:1px solid var(--border);
  background:var(--surface); font-size:11.5px; }

.ce-ide{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr); gap:18px;
  align-items:start; }
@media (max-width:1040px){ .ce-ide{ grid-template-columns:minmax(0,1fr); } }

/* --------------------------------------------------------- the editor */
.ce-editor{ border-radius:14px; overflow:hidden; background:var(--ce-bg);
  border:1px solid var(--ce-line); box-shadow:0 18px 40px -26px rgba(11,14,22,.6); }
.ce-bar{ display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--ce-bar); border-bottom:1px solid var(--ce-line); }
.ce-spacer{ flex:1 1 auto; }
.ce-lang-wrap{ display:inline-flex; align-items:center; height:34px;
  border-radius:9px; background:#161b28; border:1px solid var(--ce-line); }
.ce-lang-wrap select{ height:32px; padding:0 10px; border:0; background:transparent;
  color:var(--ce-ink); font-size:13.5px; font-weight:600; outline:none; cursor:pointer; }
.ce-lang-wrap select option{ color:#111; }

.ce-ghost{ height:34px; padding:0 13px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid var(--ce-line); color:var(--ce-dim);
  font-size:13px; font-weight:600; }
.ce-ghost:hover{ color:var(--ce-ink); border-color:#39415a; }
.ce-run{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 18px;
  border:0; border-radius:9px; cursor:pointer; background:var(--blue); color:#fff;
  font-size:13.5px; font-weight:700;
  box-shadow:0 8px 18px -8px rgba(193,18,31,.9);
  transition:background .15s ease, transform .15s ease; }
.ce-run:hover{ background:var(--blue-dark); transform:translateY(-1px); }
.ce-run:disabled{ opacity:.6; cursor:default; transform:none; }
.ce-run .fh-i{ transform:rotate(0); }

/* gutter + code, scrolling together */
.ce-wrap{ display:flex; align-items:stretch; }
.ce-gutter{ flex:none; width:52px; padding:16px 10px 16px 0; overflow:hidden;
  text-align:right; white-space:pre; user-select:none;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.5px; line-height:1.7;
  color:#4d5670; background:#0d1119; border-right:1px solid var(--ce-line); }
.ce-code{ flex:1 1 auto; min-width:0; min-height:480px; padding:16px 16px 16px 14px;
  border:0; outline:none; resize:vertical; background:transparent; color:var(--ce-ink);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.5px; line-height:1.7;
  tab-size:4; white-space:pre; overflow:auto; }
.ce-code::placeholder{ color:#4d5670; }
@media (max-width:620px){ .ce-code{ min-height:340px; font-size:12.8px; } }

.ce-status{ display:flex; align-items:center; gap:9px; padding:8px 14px;
  background:var(--ce-bar); border-top:1px solid var(--ce-line);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px; color:var(--ce-dim); }
.ce-status i{ font-style:normal; color:var(--ce-ink); }
.ce-dot{ opacity:.5; }
.ce-state{ padding:2px 10px; border-radius:var(--radius-pill); background:#161b28;
  color:var(--ce-dim); font-weight:600; transition:background .2s ease, color .2s ease; }
.ce-state.is-run{ background:#1d2437; color:#9ec5ff; }
.ce-state.is-ok{ background:rgba(126,226,168,.14); color:#7ee2a8; }
.ce-state.is-bad{ background:rgba(255,77,106,.14); color:#ff8a9e; }

/* ---------------------------------------------------- input / output */
.ce-side{ display:flex; flex-direction:column; gap:14px; }
.ce-panel{ border:1px solid var(--border); border-radius:14px; background:var(--surface);
  overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease; }
.ce-panel h2{ display:flex; align-items:center; gap:8px; margin:0; padding:12px 15px;
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  border-bottom:1px solid var(--border-soft); }
.ce-panel h2 small{ font-weight:600; font-size:11.5px; color:var(--text-faint); }
.ce-panel .fh-i{ color:var(--text-faint); }
.ce-in{ display:block; width:100%; min-height:110px; padding:13px 15px; border:0; outline:none;
  resize:vertical; background:transparent; color:var(--text);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; line-height:1.65; }
.ce-time{ margin-left:auto; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px; color:var(--text-faint); }

.ce-console{ min-height:210px; max-height:420px; overflow:auto; padding:14px 15px;
  background:var(--ce-bg); color:var(--ce-ink);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word; }
.ce-console .c-dim{ color:var(--ce-dim); }
.ce-console .c-err{ color:#ff8a9e; }

/* The flash. Once, briefly, on the panel that changed — not a toast that
   covers something else and not an animation that repeats. */
.ce-panel.is-ok{ border-color:#7ee2a8; box-shadow:0 0 0 3px rgba(126,226,168,.16); }
.ce-panel.is-bad{ border-color:#ff8a9e; box-shadow:0 0 0 3px rgba(255,138,158,.16); }
.ce-panel.is-ok .ce-console, .ce-panel.is-bad .ce-console{ animation:ce-in .3s ease both; }
@keyframes ce-in{ from{ opacity:.35; transform:translateY(-3px); } to{ opacity:1; transform:none; } }

.ce-note{ display:flex; gap:9px; margin:0; font-size:12.5px; line-height:1.65;
  color:var(--text-faint); }
.ce-note .fh-i{ flex:none; margin-top:2px; }

/* ------------------------------------------------------------- tips */
.ce-tips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.ce-tips > div{ padding:18px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); transition:border-color .16s ease, transform .16s ease; }
.ce-tips > div:hover{ border-color:var(--blue); transform:translateY(-2px); }
.ce-tips b{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; }
.ce-tips b .fh-i{ color:var(--blue); }
.ce-tips p{ margin:9px 0 0; font-size:13.4px; line-height:1.65; color:var(--text-dim); }
.ce-tips code{ font-size:.92em; }

@media (prefers-reduced-motion: reduce){
  .ce-run, .ce-panel, .ce-tips > div, .ce-state{ transition:none; }
  .ce-run:hover, .ce-tips > div:hover{ transform:none; }
  .ce-panel.is-ok .ce-console, .ce-panel.is-bad .ce-console{ animation:none; }
}

/* =====================================================================
   TEST START SCREEN  (/test.php, before the clock starts)

   Two columns: what the paper is on the left, and one panel on the right
   that answers "how long, how many, what does it cost me, and where is
   the button". The button never moves between papers, so somebody who
   sits ten of these stops looking for it.
   ===================================================================== */
.ts{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px;
  max-width:1200px; margin:0 auto; align-items:start; }
@media (max-width:1040px){ .ts{ grid-template-columns:minmax(0,1fr); gap:24px; } }
.ts-main{ min-width:0; }

.ts-kind{ margin:0; font-size:11.5px; font-weight:750; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); }
.ts-title{ margin:10px 0 0; font-size:clamp(25px,2.9vw,33px); line-height:1.2;
  letter-spacing:-.025em; text-wrap:balance; }
.ts-sum{ margin:12px 0 0; font-size:16.5px; line-height:1.6; color:var(--text-dim);
  max-width:62ch; }

.ts-rules{ margin-top:26px; padding:20px 22px; border-radius:14px;
  border:1px solid var(--border); border-left:3px solid var(--blue);
  background:var(--surface); }
.ts-rules h2{ display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); }
.ts-md{ font-size:15.5px; line-height:1.72; color:var(--text-dim); }
.ts-md p{ margin:0 0 13px; }
.ts-md > *:last-child{ margin-bottom:0; }
.ts-md ul, .ts-md ol{ margin:0 0 13px; padding-left:20px; }
.ts-md li{ margin-bottom:6px; }
.ts-md strong{ color:var(--text); font-weight:650; }

.ts-block{ margin-top:30px; }
.ts-block h2{ margin:0 0 12px; font-size:16.5px; letter-spacing:-.015em; }
.ts-rows{ border:1px solid var(--border); border-radius:13px; background:var(--surface);
  overflow:hidden; }
.ts-row, .ts-brow{ display:flex; align-items:center; gap:14px; padding:13px 16px;
  border-top:1px solid var(--border-soft); text-decoration:none; color:inherit; }
.ts-row:first-child, .ts-brow:first-child{ border-top:0; }
.ts-row:hover{ background:var(--surface-2); }
.ts-row-body{ flex:1 1 auto; min-width:0; }
.ts-row-body b{ display:block; font-size:14px; font-weight:650; line-height:1.4; }
.ts-row-body small{ display:block; margin-top:2px; font-size:12px; color:var(--text-faint); }
.ts-review{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  font-weight:650; color:var(--blue); }
.ts-review .fh-i{ transition:transform .15s ease; }
.ts-row:hover .ts-review .fh-i{ transform:translateX(3px); }

/* A percentage as a ring: the number is still there, the ring is what the
   eye reads across four attempts in a column. */
.ts-ring{ flex:none; width:44px; height:44px; border-radius:50%; display:grid;
  place-items:center; background:conic-gradient(var(--ring) calc(var(--p) * 1%),
  var(--surface-2) 0); --ring:var(--blue); }
.ts-ring.ok{ --ring:var(--green-fill,#2f6b34); }
.ts-ring.mid{ --ring:var(--amber,#e0a100); }
.ts-ring.low{ --ring:var(--blue); }
.ts-ring i{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--surface); font-style:normal; font-size:12px; font-weight:750;
  font-variant-numeric:tabular-nums; }
.ts-ring i small{ font-size:8.5px; font-weight:600; color:var(--text-faint); }

.ts-pos{ flex:none; width:34px; font-size:12.5px; font-weight:700; color:var(--text-faint);
  font-variant-numeric:tabular-nums; }
.ts-pos.p1{ color:var(--amber-text,#8a5a00); }
.ts-pos.p2{ color:#7d858f; }
.ts-pos.p3{ color:#b07b4f; }
.ts-brow.me{ background:var(--blue-tint); }
.ts-score{ flex:none; font-size:14px; font-weight:750; font-variant-numeric:tabular-nums; }
.ts-score small{ font-weight:600; color:var(--text-faint); }

/* ------------------------------------------------------- the panel -- */
.ts-side{ position:sticky; top:calc(var(--lp-top,64px) + 20px);
  display:flex; flex-direction:column; gap:14px; }
@media (max-width:1040px){ .ts-side{ position:static; } }
.ts-card{ border:1px solid var(--border); border-radius:16px; background:var(--surface);
  overflow:hidden; }
.ts-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ts-facts > div{ padding:15px 16px; border-top:1px solid var(--border-soft);
  border-left:1px solid var(--border-soft); }
.ts-facts > div:nth-child(-n+2){ border-top:0; }
.ts-facts > div:nth-child(2n+1){ border-left:0; }
.ts-facts span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.ts-facts b{ font-size:23px; font-weight:750; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.ts-facts b i{ margin-left:4px; font-style:normal; font-size:12.5px; font-weight:600;
  color:var(--text-faint); }
.ts-facts b.coin{ font-size:20px; color:var(--amber-text,#8a5a00); }
.ts-facts b.good{ font-size:19px; color:var(--green-fill,#2f6b34); }
.ts-facts b.bad{ font-size:19px; color:var(--blue); }
.ts-facts small{ display:block; margin-top:4px; font-size:11.5px; color:var(--text-faint); }

.ts-go{ padding:18px 16px; border-top:1px solid var(--border);
  background:var(--surface-2); text-align:center; }
.ts-go p{ margin:0 0 14px; font-size:13.2px; line-height:1.6; color:var(--text-dim); }
.ts-go p .fh-i{ vertical-align:-2px; margin-right:5px; opacity:.7; }
.ts-go small{ display:block; margin-top:10px; font-size:11.8px; color:var(--text-faint); }
.ts-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  height:48px; border:0; border-radius:11px; cursor:pointer;
  background:var(--blue); color:#fff; font-size:15px; font-weight:700; text-decoration:none;
  box-shadow:0 12px 26px -14px rgba(193,18,31,.9);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease; }
.ts-btn:hover{ background:var(--blue-dark); color:#fff; transform:translateY(-1px);
  box-shadow:0 16px 30px -14px rgba(193,18,31,.95); }
.ts-btn .fh-i{ transition:transform .16s ease; }
.ts-btn:hover .fh-i{ transform:translateX(3px); }

.ts-go.is-lock{ background:var(--amber-tint,#fff6da); }
.ts-pill{ display:inline-block; margin-bottom:10px; padding:3px 11px;
  border-radius:var(--radius-pill); background:var(--amber,#e0a100); color:#3a2a00;
  font-size:11px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.ts-gate{ margin:0; padding:16px; border-top:1px solid var(--border);
  background:var(--surface-2); font-size:13.4px; line-height:1.6; color:var(--text-dim);
  text-align:center; }
.ts-gate b{ color:var(--text); }

.ts-tips{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ts-tips li{ display:flex; gap:9px; font-size:12.5px; line-height:1.55; color:var(--text-faint); }
.ts-tips .fh-i{ flex:none; margin-top:1px; color:var(--green-fill,#2f6b34); }

@media (prefers-reduced-motion: reduce){
  .ts-btn, .ts-btn .fh-i, .ts-review .fh-i{ transition:none; }
  .ts-btn:hover{ transform:none; }
}

/* =====================================================================
   FIRSTHACK CAMPUS  (/campus.php)

   The only page here written for somebody who is not a student, so it is
   allowed to look like a product page: a hero with a picture of the
   thing, four steps, what it records, a price, and the questions a TnP
   officer asks before they will put their name on it.
   ===================================================================== */
.cp{ display:flex; flex-direction:column; gap:56px; max-width:1180px; margin:0 auto; }
@media (max-width:760px){ .cp{ gap:42px; } }

.cp-eyebrow{ display:inline-flex; align-items:center; gap:7px; margin:0;
  font-size:11.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); }
.cp-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:40px;
  align-items:center; }
@media (max-width:980px){ .cp-hero{ grid-template-columns:minmax(0,1fr); gap:28px; } }
.cp-hero h1{ margin:14px 0 0; font-size:clamp(30px,3.9vw,46px); line-height:1.08;
  letter-spacing:-.035em; text-wrap:balance; }
.cp-hero h1 em{ font-style:normal; color:var(--blue); }
.cp-lede{ margin:16px 0 0; font-size:16.5px; line-height:1.7; color:var(--text-dim);
  max-width:56ch; }
.cp-cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:24px; }
.cp-fine{ margin:14px 0 0; font-size:12.8px; color:var(--text-faint); }

/* the wall of candidates, drawn */
.cp-art{ position:relative; }
.cp-wall{ border-radius:16px; border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--e2); overflow:hidden; }
.cp-wall-head{ display:flex; align-items:center; gap:10px; padding:12px 15px;
  border-bottom:1px solid var(--border-soft); font-size:12.5px; color:var(--text-faint); }
.cp-live{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:var(--radius-pill); background:var(--blue-tint); color:var(--blue);
  font-size:11px; font-weight:750; }
.cp-live i{ width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:hz-pulse 1.6s ease-in-out infinite; }
.cp-wall-head span:last-child{ margin-left:auto; }
.cp-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:15px; }
.cp-tile{ display:grid; place-items:center; height:52px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:12px; font-weight:700; color:var(--text-faint); }
.cp-tile.is-warn{ border-color:var(--amber,#e0a100); background:var(--amber-tint,#fff6da);
  color:var(--amber-text,#8a5a00); }
.cp-tile.is-flag{ border-color:var(--blue); background:var(--blue-tint); color:var(--blue);
  animation:cp-blink 2.4s ease-in-out infinite; }
@keyframes cp-blink{ 0%,100%{ box-shadow:0 0 0 0 rgba(193,18,31,.32); }
  50%{ box-shadow:0 0 0 5px rgba(193,18,31,0); } }
.cp-flags{ display:flex; flex-direction:column; gap:7px; padding:0 15px 15px;
  font-size:12px; color:var(--text-dim); }
.cp-flags span{ display:flex; align-items:center; gap:8px; }
.cp-flags i{ width:7px; height:7px; border-radius:2px; flex:none; }
.cp-flags i.warn{ background:var(--amber,#e0a100); }
.cp-flags i.flag{ background:var(--blue); }

/* ------------------------------------------------------------ sections */
.cp-sec h2{ margin:0; font-size:clamp(21px,2.3vw,27px); letter-spacing:-.025em; }
.cp-sub{ margin:12px 0 0; font-size:15.5px; line-height:1.7; color:var(--text-dim);
  max-width:72ch; }

.cp-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
  margin-top:24px; counter-reset:cp; }
@media (max-width:900px){ .cp-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cp-steps{ grid-template-columns:minmax(0,1fr); } }
.cp-step{ position:relative; padding:20px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); transition:border-color .16s ease, transform .16s ease; }
.cp-step:hover{ border-color:var(--blue); transform:translateY(-2px); }
.cp-step i{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--blue); color:#fff; font-style:normal; font-size:13px; font-weight:750; }
.cp-step b{ display:block; margin:13px 0 0; font-size:15.5px; font-weight:700;
  letter-spacing:-.015em; }
.cp-step p{ margin:7px 0 0; font-size:13.5px; line-height:1.65; color:var(--text-dim); }

.cp-watch{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  margin-top:22px; }
@media (max-width:900px){ .cp-watch{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cp-watch{ grid-template-columns:minmax(0,1fr); } }
.cp-w{ padding:19px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); }
.cp-w i{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--blue-tint); color:var(--blue); }
.cp-w b{ display:block; margin:12px 0 0; font-size:15px; font-weight:700; }
.cp-w p{ margin:6px 0 0; font-size:13.4px; line-height:1.65; color:var(--text-dim); }
.cp-note{ display:flex; gap:9px; margin:18px 0 0; font-size:13px; line-height:1.65;
  color:var(--text-faint); max-width:78ch; }
.cp-note .fh-i{ flex:none; margin-top:2px; }

/* -------------------------------------------------------------- price */
.cp-switch{ display:inline-flex; gap:4px; margin-top:22px; padding:4px;
  border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border); }
.cp-switch button{ height:34px; padding:0 16px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--text-dim); font-size:13px; font-weight:650;
  cursor:pointer; transition:background .15s ease, color .15s ease; }
.cp-switch button.on{ background:var(--surface); color:var(--blue);
  box-shadow:0 1px 3px rgba(31,31,31,.1); }

.cp-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin-top:22px; align-items:stretch; }
@media (max-width:980px){ .cp-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .cp-plans{ grid-template-columns:minmax(0,1fr); } }
.cp-plan{ position:relative; display:flex; flex-direction:column; padding:26px 24px;
  border-radius:16px; border:1px solid var(--border); background:var(--surface); }
.cp-plan.is-pop{ border-color:var(--blue); border-width:2px; padding:25px 23px; }
.cp-pop{ position:absolute; top:-11px; left:24px; padding:3px 11px;
  border-radius:var(--radius-pill); background:var(--blue); color:#fff;
  font-size:10.5px; font-weight:750; letter-spacing:.04em; }
.cp-plan > b{ font-size:17px; font-weight:750; letter-spacing:-.015em; }
.cp-price{ margin-top:14px; min-height:54px; }
.cp-amt{ display:flex; align-items:baseline; gap:8px; }
.cp-amt[hidden]{ display:none; }
.cp-amt i{ font-style:normal; font-size:34px; font-weight:750; letter-spacing:-.035em;
  line-height:1; }
.cp-amt small{ font-size:12.5px; color:var(--text-faint); }
.cp-plan ul{ list-style:none; margin:18px 0 22px; padding:0; display:flex;
  flex-direction:column; gap:9px; }
.cp-plan li{ display:flex; align-items:flex-start; gap:9px; font-size:13.8px;
  line-height:1.5; color:var(--text-dim); }
.cp-plan li b{ color:var(--text); font-weight:700; }
.cp-plan li .fh-i{ flex:none; margin-top:2px; color:var(--green-fill,#2f6b34); }
.cp-plan .lp-btn{ margin-top:auto; width:100%; justify-content:center; }
.cp-plan.is-talk{ background:var(--surface-2); border-style:dashed; }
.cp-plan.is-talk p{ margin:12px 0 22px; font-size:13.8px; line-height:1.65;
  color:var(--text-dim); }

/* ---------------------------------------------------------------- faq */
.cp-faq{ margin-top:20px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); overflow:hidden; }
.cp-faq details{ border-top:1px solid var(--border-soft); }
.cp-faq details:first-child{ border-top:0; }
.cp-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; cursor:pointer; list-style:none;
  font-size:15px; font-weight:650; letter-spacing:-.01em; }
.cp-faq summary::-webkit-details-marker{ display:none; }
.cp-faq summary::after{ content:"+"; flex:none; font-size:18px; font-weight:600;
  color:var(--text-faint); transition:transform .18s ease; }
.cp-faq details[open] summary::after{ transform:rotate(45deg); color:var(--blue); }
.cp-faq details[open] summary{ color:var(--blue); }
.cp-faq p{ margin:0; padding:0 20px 18px; font-size:14.2px; line-height:1.72;
  color:var(--text-dim); max-width:80ch; }

/* --------------------------------------------------------------- band */
.cp-band{ padding:38px 30px; border-radius:18px; text-align:center;
  background:linear-gradient(135deg, var(--blue-tint) 0%, var(--surface) 70%);
  border:1px solid var(--border); }
.cp-band h2{ margin:0; font-size:clamp(21px,2.3vw,27px); letter-spacing:-.025em; }
.cp-band p{ margin:12px auto 0; max-width:56ch; font-size:15.5px; line-height:1.65;
  color:var(--text-dim); }
.cp-band .cp-cta{ justify-content:center; }

@media (prefers-reduced-motion: reduce){
  .cp-step, .cp-switch button, .cp-faq summary::after{ transition:none; }
  .cp-step:hover{ transform:none; }
  .cp-live i, .cp-tile.is-flag{ animation:none; }
}