/* priest.locker — the product's own theme, worn in public.
   Palette and type are the panel's: warm-black surfaces, bone serif
   display, the peacock band as the one moving thing. The band's law
   travels too: a rule under the title, the live edge of a running
   thing, never a fill behind text. */

:root{
  --surface-0:#0a0506; --surface-1:#140b0e; --surface-2:#190d10;
  --surface-3:#221216; --edge:rgba(255,235,225,.10);
  --text-1:#eaeff0; --text-2:#cbc2b9; --text-3:#93877c;
  --gold:#d4a656; --gold-dim:#967d32;
  --violet:#6b3fa0; --blue:#1b6ca8; --teal:#17a398;
  --green:#1f7a5a; --eye:#e3bb4f;
  --band:linear-gradient(90deg,var(--violet) 0%,var(--blue) 22%,
    var(--teal) 45%,var(--green) 63%,var(--eye) 82%,var(--violet) 100%);
  --display:Georgia,'Times New Roman',serif;
  --body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:Consolas,'Cascadia Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--surface-0);color:var(--text-2);
  font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--eye);outline-offset:2px}

/* ---- the band -------------------------------------------------------- */
.band{height:3px;background:var(--band);background-size:200% 100%;
  animation:drift 14s linear infinite}
@keyframes drift{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---- nav ------------------------------------------------------------- */
header{position:sticky;top:0;z-index:50;background:rgba(10,5,6,.92);
  backdrop-filter:blur(8px)}
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;
  gap:26px;padding:14px 22px}
.logo{font:600 19px var(--display);letter-spacing:.14em;color:var(--text-1);
  text-transform:uppercase}
.logo:hover{text-decoration:none}
.nav a.nlink{color:var(--text-2);font-size:14.5px}
.nav a.nlink:hover{color:var(--text-1);text-decoration:none}
.spacer{flex:1}
/* dropdown */
.drop{position:relative}
.drop>button{background:none;border:0;color:var(--text-2);cursor:pointer;
  font:14.5px var(--body);padding:6px 2px;display:flex;gap:6px;align-items:center}
.drop>button:hover{color:var(--text-1)}
.drop>button::after{content:'';width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .15s}
.drop[data-open]>button::after{transform:rotate(-135deg);margin-top:3px}
.menu{position:absolute;top:calc(100% + 10px);left:-14px;min-width:250px;
  background:var(--surface-1);border:1px solid var(--edge);border-radius:12px;
  padding:8px;display:none;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.drop[data-open] .menu{display:block}
.menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--text-2);
  font-size:14.5px}
.menu a:hover{background:var(--surface-3);color:var(--text-1);
  text-decoration:none}
.menu a b{display:block;color:var(--text-1);font-weight:600}
.menu a span{font-size:13px;color:var(--text-3)}
.cta{background:var(--gold);color:#1c1006;font-weight:600;font-size:14.5px;
  padding:9px 18px;border-radius:9px;border:0;cursor:pointer}
.cta:hover{filter:brightness(1.08);text-decoration:none}
.ghost{border:1px solid var(--edge);color:var(--text-1);padding:9px 18px;
  border-radius:9px;font-size:14.5px}
.ghost:hover{border-color:var(--gold-dim);text-decoration:none}

/* ---- shared blocks ---------------------------------------------------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{padding:72px 0}
.eyebrow{font:600 12px var(--body);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dim)}
h1{font:600 clamp(34px,5.2vw,54px)/1.12 var(--display);color:var(--text-1);
  letter-spacing:.01em;margin:14px 0 18px}
h2{font:600 clamp(24px,3.2vw,32px)/1.2 var(--display);color:var(--text-1);
  margin:12px 0 10px;position:relative;display:inline-block;padding-bottom:12px}
h2::after{content:'';position:absolute;left:0;bottom:0;width:64px;height:3px;
  background:var(--band);background-size:200% 100%;
  animation:drift 14s linear infinite}
h3{font:600 17px var(--body);color:var(--text-1);margin-bottom:6px}
.lead{font-size:18px;max-width:56ch}
.grid{display:grid;gap:18px;margin-top:34px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface-1);border:1px solid var(--edge);
  border-radius:14px;padding:24px}
.card p{font-size:14.5px;color:var(--text-2)}
.feather{width:26px;height:8px;border-radius:4px;margin-bottom:14px}
.mono{font-family:var(--mono);font-size:13.5px}
footer{border-top:1px solid var(--edge);padding:34px 0 44px;margin-top:40px;
  color:var(--text-3);font-size:13.5px}
footer .wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center}

/* ---- hero panel mock --------------------------------------------------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;
  align-items:center;padding:84px 0 72px}
.panel{background:var(--surface-1);border:1px solid var(--edge);
  border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.panel-top{display:flex;align-items:center;gap:10px;padding:12px 16px;
  position:relative;border-bottom:1px solid var(--edge)}
.panel-top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:3px;background:var(--band);background-size:200% 100%;
  animation:drift 14s linear infinite}
.panel-title{font:600 13px var(--display);letter-spacing:.18em;
  color:var(--text-1)}
.pill{margin-left:auto;font-size:11.5px;color:var(--text-3);
  border:1px solid var(--edge);border-radius:99px;padding:3px 10px}
.chat{padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px;
  min-height:240px}
.msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:14px;
  line-height:1.55}
.me{align-self:flex-end;background:var(--surface-3);color:var(--text-1)}
.ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--edge)}
.ai .who{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:5px}
.caret{display:inline-block;width:7px;height:15px;background:var(--gold);
  vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.composer{margin:0 16px 16px;border:1px solid var(--edge);border-radius:11px;
  padding:11px 14px;color:var(--text-3);font-size:14px}

/* ---- terminal --------------------------------------------------------- */
.term{background:#070304;border:1px solid var(--edge);border-radius:12px;
  padding:18px 20px;font:13.5px/1.7 var(--mono);color:var(--text-2);
  overflow-x:auto}
.term .ok{color:var(--teal)}
.term .dim{color:var(--text-3)}

/* ---- releases table ---------------------------------------------------- */
.rel{width:100%;border-collapse:collapse;margin-top:26px;font-size:14.5px}
.rel th{text-align:left;font:600 12px var(--body);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);padding:10px 12px;
  border-bottom:1px solid var(--edge)}
.rel td{padding:12px;border-bottom:1px solid var(--edge);vertical-align:top}
.rel td:first-child{color:var(--text-1);font-weight:600}
.sha{color:var(--text-3);font-size:12px;word-break:break-all}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;padding-top:52px}
  .g3,.g2{grid-template-columns:1fr}
  section{padding:52px 0}
  .nav{gap:16px}
  .nav .nlink.thin{display:none}
}
/* A phone's nav is four things wide at most, and the button must never
   leave the screen - the product's own mobile law (fixed chrome gets its
   own budget, and 375px is a real width, not an edge case). */
@media (max-width:520px){
  .nav{gap:13px;padding:12px 14px}
  .logo{font-size:16px}
  .cta{padding:8px 12px;font-size:13px;white-space:nowrap}
  .drop>button,.nav a.nlink{font-size:13.5px}
}