/* ============================================================
   PARABELLUM PROGRAMS — shared system
   Derived from app.html. Warm near-black, soft light, rounded,
   tool-identity colour. One source of truth for every site page.
   (app.html keeps swiss.css and is NOT governed by this file.)
   ============================================================ */

:root{
  /* ---- surfaces (warm near-black, not cool grey) ---- */
  --bg:#070505;
  --surface:#0E0A0B;
  --surface-2:#141010;
  --surface-3:#1B1516;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* ---- text ---- */
  --text:#F4EDE3;            /* bone */
  --dim:#9C8F85;
  --dim-2:#5C524B;

  /* ---- depth: soft light, never a hard hairline shadow ---- */
  --glow:0 0 16px rgba(244,237,227,.22);
  --glow-soft:0 0 8px rgba(244,237,227,.13);
  --lift:0 10px 34px rgba(0,0,0,.45);

  /* ---- tool identity colours (the app's signature) ---- */
  --c-lifts:#FF4D4D;
  --c-cal:#5CC9FF;
  --c-tasks:#B58CFF;
  --c-goals:#52E6A4;
  --c-sleep:#FFB454;
  --c-home:#9C8F85;
  --mark-blue:#2B6BFF;
  --mark-yellow:#FFD23F;

  /* ---- service accents (site-side mapping of the tool palette) ---- */
  --c-app:#5CC9FF;           /* The App        */
  --c-tree:#52E6A4;          /* Tree of Life   */
  --c-frag:#B58CFF;          /* Fragments      */
  --ac:#5CC9FF;              /* current accent, overridable per section */

  /* ---- radii: nothing square ---- */
  --r-xs:8px; --r-sm:10px; --r:11px; --r-md:13px; --r-lg:14px; --r-xl:20px;

  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);

  /* ---- legacy aliases -------------------------------------------------
     Older markup still references these names in inline style attributes.
     Mapping them here means no stale green/gilt value can leak through,
     in either hex or rgb() form. Do not add new uses. ------------------- */
  --black:#070505; --black-2:#0E0A0B; --void:#070505; --panel:#0E0A0B;
  --ink:#F4EDE3; --bone:#F4EDE3;
  --ink-2:#9C8F85; --ink-3:#7D7168; --ink-4:#5C524B; --muted:#5C524B;
  --rule:rgba(255,255,255,.08); --rule-2:rgba(255,255,255,.14);
  --accent:#5CC9FF; --accent-lift:#5CC9FF;
  --gold:#FFD23F; --gilt:#FFD23F; --pale:#FFE08A;
  --flame:#FF4D4D; --blood:#FF4D4D; --rust:#FF4D4D; --oxblood:#B58CFF;
  --cyan:#5CC9FF; --blue:#5CC9FF; --violet:#B58CFF;
  --pine:#52E6A4; --sage:#52E6A4;
  --discord:#5865F2;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Exo 2',system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* the app's faint top bloom */
  background-image:radial-gradient(circle at 50% -8%, rgba(92,201,255,.04), transparent 55%);
  background-attachment:fixed;
}
main,header,footer,section,nav,aside,.wrap{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
::-webkit-scrollbar{width:0;height:0}
input,textarea,button,select{font-family:inherit;color:inherit}

/* ---- type ------------------------------------------------------------ */
.display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  line-height:.86;letter-spacing:-.015em;font-size:clamp(3.2rem,15vw,8rem);margin:0;
  text-shadow:var(--glow-soft)}
h1,h2,h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.005em;line-height:.94;margin:0}
h2{font-size:clamp(2rem,7vw,3.4rem)}
h3{font-size:clamp(1.25rem,4vw,1.8rem)}
p{margin:0 0 1em;color:var(--dim);max-width:64ch}
b,strong{font-weight:700;color:var(--text)}
.mono{font-family:'Space Mono','SF Mono',ui-monospace,monospace}
.ey{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim)}
.ey .n,.dot{color:var(--ac)}
.k{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ac);margin-bottom:14px}

/* ---- layout ---------------------------------------------------------- */
.pad{padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px)}
.rule{border:0;border-top:1px solid var(--line);margin:0;height:0}
hr.rule{border-top:1px solid var(--line)}

/* ---- top bar --------------------------------------------------------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:calc(14px + var(--safe-t)) clamp(20px,5vw,64px) 14px;
  border-bottom:1px solid var(--line);
  background:rgba(7,5,5,.82);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:60}
.bar .mk{display:flex;align-items:center;gap:11px}
.bar .mk svg{width:14px;height:auto;color:var(--text);
  filter:drop-shadow(0 0 5px rgba(244,237,227,.35));flex-shrink:0}
.bar .mk b{font-weight:700;font-size:.86rem;letter-spacing:.18em;text-shadow:var(--glow-soft)}
.bar .go{font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.14em;
  color:var(--dim);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:8px 13px;transition:color .18s,border-color .18s,box-shadow .18s}
.bar .go:hover{color:var(--ac);border-color:var(--ac);
  box-shadow:0 0 16px color-mix(in srgb,var(--ac) 22%,transparent)}
.bar .go:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ---- rows (index service list / section headers) --------------------- */
.rows{border-top:1px solid var(--line)}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:clamp(16px,2.6vw,26px) clamp(20px,5vw,64px);
  border-bottom:1px solid var(--line);
  transition:background .2s,padding-left .2s}
a.row:hover{background:var(--surface);padding-left:calc(clamp(20px,5vw,64px) + 8px)}
.row .t{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2.2rem);letter-spacing:-.005em;color:var(--text)}
.row .m{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  color:var(--dim);white-space:nowrap}
a.row:hover .m{color:var(--ac)}
.row .num{font-family:'Space Mono',monospace;font-size:.62rem;color:var(--dim-2);margin-right:14px}

/* ---- cards ----------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:15px}
.fc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;position:relative;overflow:hidden}
.fc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac)}

/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r);font-weight:600;font-size:.84rem;letter-spacing:.03em;
  padding:13px 22px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--text);
  transition:border-color .18s,background .18s,color .18s,box-shadow .18s,transform .1s}
.btn:hover{border-color:var(--ac);color:var(--text);
  box-shadow:0 0 18px color-mix(in srgb,var(--ac) 20%,transparent)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.btn-ac,.btn.solid{background:var(--ac);color:#060404;border-color:var(--ac);font-weight:700;
  box-shadow:0 0 20px color-mix(in srgb,var(--ac) 32%,transparent)}
.btn-ac:hover,.btn.solid:hover{color:#060404;
  box-shadow:0 0 26px color-mix(in srgb,var(--ac) 42%,transparent)}
.btn.ghost,.btn.line{background:transparent}
.btn-block{width:100%}
.btn-sm{padding:9px 14px;font-size:.74rem;border-radius:var(--r-xs)}

/* ---- service hero (interior pages) ----------------------------------- */
.svc-hero{padding:clamp(56px,10vw,124px) clamp(20px,5vw,64px) clamp(30px,5vw,52px);
  display:flex;flex-direction:column;gap:clamp(26px,4vw,46px);
  border-bottom:1px solid var(--line)}
.svc-hero .svc-mark svg{width:clamp(110px,16vw,158px);height:auto;color:var(--text);
  display:block;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--ac) 22%,transparent))}
.svc-hero h1{font-size:clamp(3rem,12vw,7rem);line-height:.86;letter-spacing:-.02em;margin:0;
  text-shadow:var(--glow-soft)}
.svc-hero h1 .dot{color:var(--ac)}
.svc-hero .lead{color:var(--dim);max-width:60ch;margin-top:10px;font-size:1.05rem;line-height:1.75}

/* ---- long-form docs (legal / how-to / success) ----------------------- */
.doc{padding:clamp(40px,7vw,84px) clamp(20px,5vw,64px);max-width:840px}
.doc .svc-mark svg{filter:drop-shadow(0 0 18px rgba(244,237,227,.18))}
.doc h1{font-size:clamp(2.6rem,9vw,5rem);margin-bottom:8px;text-shadow:var(--glow-soft)}
.doc .lead{color:var(--dim);font-size:1.06rem;margin:14px 0 40px;max-width:60ch;line-height:1.75}
.doc h2{font-size:clamp(1.2rem,3vw,1.6rem);margin:44px 0 12px;color:var(--text)}
.doc h3{font-family:'Space Mono',monospace;font-weight:700;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.18em;color:var(--ac);margin:36px 0 10px}
.doc p{color:var(--dim);line-height:1.8}
.doc ol,.doc ul{color:var(--dim);line-height:1.8;padding-left:1.2em}
.doc a:not(.btn){color:var(--ac);text-decoration:underline;text-underline-offset:3px}

/* ---- footer ---------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding:44px clamp(20px,5vw,64px) calc(34px + var(--safe-b))}
.foot .fmk{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.foot .fmk svg{width:16px;color:var(--text);filter:drop-shadow(0 0 6px rgba(244,237,227,.3))}
.foot .fmk b{font-weight:700;letter-spacing:.16em;font-size:.8rem}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.foot a{display:block;font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  color:var(--dim);padding:5px 0;transition:color .16s}
.foot a:hover{color:var(--ac)}
.foot a:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
.foot .ct{font-family:'Space Mono',monospace;font-size:.56rem;letter-spacing:.2em;
  color:var(--dim-2);margin-bottom:8px;text-transform:uppercase}
.foot .fine{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
  font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.08em;color:var(--dim-2)}
/* compact footer variant used by the tool pages */
footer .fn{font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.82rem;color:var(--dim)}
footer .fm,footer .fc-note{font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim-2);margin-top:12px}

/* ---- pop-out drawer nav ---------------------------------------------- */
#navToggle{position:fixed;top:12px;left:14px;z-index:1200;width:42px;height:42px;
  display:flex;background:rgba(20,16,16,.74);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;color:var(--text);
  transition:border-color .2s,color .2s,box-shadow .2s}
#navToggle:hover{border-color:var(--ac);color:var(--ac);
  box-shadow:0 0 16px color-mix(in srgb,var(--ac) 24%,transparent)}
#navToggle:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
#navToggle span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;
  background:currentColor;
  transition:top .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),opacity .2s}
#navToggle span:nth-child(1){top:14px}
#navToggle span:nth-child(2){top:20px}
#navToggle span:nth-child(3){top:26px}
body.nav-open #navToggle span:nth-child(1){top:20px;transform:rotate(45deg)}
body.nav-open #navToggle span:nth-child(2){opacity:0}
body.nav-open #navToggle span:nth-child(3){top:20px;transform:rotate(-45deg)}

#navScrim{position:fixed;inset:0;z-index:1150;background:rgba(5,4,4,.62);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s}
body.nav-open #navScrim{opacity:1;visibility:visible}

#siteNav,.grail,.rail{position:fixed;left:0;top:0;bottom:0;width:246px;z-index:1180;
  transform:translateX(-100%);visibility:hidden;
  background:rgba(12,9,10,.96);backdrop-filter:blur(16px);
  border-right:1px solid var(--line-2);
  padding:72px 14px calc(22px + var(--safe-b));margin:0;gap:2px;
  transition:transform .34s cubic-bezier(.16,1,.3,1),visibility .34s;
  display:flex;flex-direction:column;overflow-y:auto}
body.nav-open #siteNav,body.nav-open .grail,body.nav-open .rail{transform:none;visibility:visible}

#siteNav .lab,.grail .glab,.rail .rlab{font-family:'Space Mono',monospace;font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);
  padding:0 0 8px 13px;margin-top:20px}
#siteNav .lab:first-child,.grail .glab:first-of-type,.rail .rlab:first-of-type{margin-top:0}
#siteNav .lab:not(:first-child),.grail .glab:not(:first-of-type),.rail .rlab:not(:first-of-type){
  border-top:1px solid var(--line);padding-top:16px;margin-top:16px}

#siteNav a,.grail a,.rail a{position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:var(--r-xs);
  font-size:.78rem;letter-spacing:.02em;color:#C9BEB0;border-left:0;
  transition:color .16s,background .16s,box-shadow .16s}
#siteNav a .i,.grail a i,.rail a i{font-family:'Space Mono',monospace;font-size:.58rem;
  color:var(--dim-2);flex:none}
.grail a i,.rail a i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;
  transition:.16s}
#siteNav a:hover,.grail a:hover,.rail a:hover{color:var(--text);background:var(--surface-2)}
.grail a:hover i,.rail a:hover i{opacity:1;background:var(--ac)}
#siteNav a.on,.grail a.on,.rail a.on{color:#060404;font-weight:700;background:var(--ac);
  box-shadow:0 0 18px -4px color-mix(in srgb,var(--ac) 62%,transparent)}
#siteNav a.on .i,.grail a.on i,.rail a.on i{color:#060404;background:#060404;opacity:1;box-shadow:none}
#siteNav a:focus-visible,.grail a:focus-visible,.rail a:focus-visible{
  outline:2px solid var(--ac);outline-offset:-2px}

/* Discord keeps its own blurple identity — the only colour not from the app */
#siteNav .dc,.grail a.dcd,.rail a.dcd{margin-top:auto;justify-content:center;
  border:1px solid var(--discord);border-radius:var(--r-sm);color:#9BA3F0;background:transparent;
  font-family:'Space Mono',monospace;font-weight:700;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;padding:12px 13px}
#siteNav .dc:hover,.grail a.dcd:hover,.rail a.dcd:hover{color:#fff;
  background:rgba(88,101,242,.14);border-color:var(--discord);box-shadow:0 0 18px rgba(88,101,242,.28)}
#siteNav .dc.on,.grail a.dcd.on,.rail a.dcd.on{background:transparent;color:#9BA3F0}
.grail a.dcd i,.rail a.dcd i{display:none}
/* the drawer is off-canvas: no reserved gutter */
body{padding-left:0}

/* sliding marker used by the tool pages' rail script */
.grail .gmark,.rail .gmark{position:absolute;left:0;top:0;width:2px;height:0;border-radius:2px;
  opacity:0;background:var(--ac);box-shadow:0 0 12px color-mix(in srgb,var(--ac) 55%,transparent);
  transition:transform .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1),opacity .3s}

/* ---- scroll progress ------------------------------------------------- */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:1300;pointer-events:none;
  background:linear-gradient(90deg,var(--c-lifts),var(--c-sleep) 34%,var(--c-cal) 68%,var(--c-goals));
  box-shadow:0 0 12px rgba(92,201,255,.45)}

/* ---- reveal on scroll ------------------------------------------------ */
[data-rv]{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
[data-rv].in{opacity:1;transform:none}

/* ---- accessibility --------------------------------------------------- */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:1400;background:var(--surface-2);color:var(--text);
  border:1px solid var(--ac);border-radius:var(--r-xs);padding:10px 14px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv]{opacity:1;transform:none;transition:none}
  #navToggle span,#siteNav,.grail,.rail,#navScrim,.btn,.row,.bar .go{transition:none}
  .grail .gmark,.rail .gmark{transition:none}
  #prog{display:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}