/* ============================================================
   ActivatHub — activathub.activatus.com stylesheet
   Brand system: ActivatUs brandkit v1.0.0 (J2 editorial direction)
   Trimmed from activatus-site/public/css/site.css; :root tokens
   are the same SSOT copy. Keep values in sync with the main site.
   ============================================================ */
:root{
  --white:#FFFFFF; --surface:#F5F5F7; --surface-2:#EDF8FD; --ink:#000000; --ink-1:#222222;
  --ink-2:#3E4448; --ink-3:#ABABAB; --line:#E6E6E6;
  --teal:#00C2C0; --sky:#6AD6FD; --blue:#2FBEF1; --magenta:#FE2BAB; --orange:#FF8A00; --yellow:#FFD801;
  --tint-sky:#B5E8FD; --tint-sky-2:#EDF8FD; --tint-ice:#F1F8FB; --tint-peri:#B7D5F4; --tint-pink:#FFBFFF; --tint-cloud:#F9FBFE;
  --gradient:linear-gradient(105deg,#00C2C0 0%,#6AD6FD 28%,#FE2BAB 61%,#FFD801 100%);
  --display:'Bricolage Grotesque',system-ui,Arial,sans-serif;
  --sans:'Hanken Grotesk',system-ui,Arial,sans-serif;
  --tracking:-0.02em;
  --r-card:26px; --r-card-lg:30px; --r-tile:32px; --r-btn:12px; --r-pill:999px;
  --shadow-card:0px 4px 31.3px 0px rgba(38,36,61,0.05);
  --shadow-lift:0px 12px 40px 0px rgba(38,36,61,0.10);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-hover:cubic-bezier(0.4,0,0.2,1);
  --gut:72px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--surface);color:var(--ink-1);font-family:var(--sans);
  font-size:17px;line-height:1.55;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut);}
.narrow{max-width:900px;}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-0.03em;line-height:1.0;color:var(--ink);}
.mut{color:var(--ink-2);}
.kick{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);}
a.tlink{font-family:var(--sans);font-weight:600;color:var(--ink-1);text-decoration:none;border-bottom:2px solid var(--teal);padding-bottom:2px;transition:color .16s ease,border-color .16s ease;}
a.tlink:hover{color:var(--teal);}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-btn) 0;font-weight:700;text-decoration:none;}
.skip:focus{left:0;}

/* buttons — brand button (black + gradient border) is the ONLY gradient on the button layer */
.btn{font-family:var(--sans);font-weight:700;font-size:16px;border-radius:var(--r-btn);padding:14px 28px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:transform .16s var(--ease-out),color .16s ease,background .16s ease;}
.btn-primary{color:#fff;border:2px solid transparent;background:linear-gradient(#000,#000) padding-box,var(--gradient) border-box;}
.btn-primary:hover{transform:scale(1.05);}
.btn-ghost{background:transparent;color:var(--ink);border:1.6px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:#fff;}

/* NAV — sticky, the one sanctioned backdrop-filter recipe */
.nav{position:sticky;top:0;z-index:20;background:rgba(245,245,247,0.8);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);}
.nav .bar{display:flex;align-items:center;gap:22px;padding:18px var(--gut);}
.nav .brand{display:flex;align-items:center;gap:16px;text-decoration:none;}
.nav .brand img{height:26px;display:block;}
/* app name as real text next to the logo: the string a reviewer matches
   against the OAuth consent screen, so it must stay selectable text */
.appname{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-0.02em;color:var(--ink);line-height:1.2;}
/* footer keeps the ActivatUs wordmark; separate the app name from it there */
.foot .appname{border-left:1px solid var(--ink-3);padding-left:16px;}
.nav .sp{flex:1;}
.navlink{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-2);text-decoration:none;padding:10px 2px;transition:color .16s ease;}
.navlink:hover{color:var(--ink);}

section{padding:92px 0;}

/* page hero (compact) */
.phero{padding:64px 0 72px;}
.phero h1{font-size:clamp(44px,5.4vw,74px);line-height:1.0;max-width:18ch;margin-top:16px;}
.phero .sub{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);margin-top:22px;max-width:52ch;}

/* reading column */
.prose{max-width:680px;font-size:18px;line-height:1.7;color:var(--ink-1);}
.prose > p{margin:0 0 22px;}
.prose > p:last-child{margin-bottom:0;}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--magenta);}
.prose a:hover{color:var(--magenta);}
.prose strong{font-weight:700;color:var(--ink);}
.prose h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-0.02em;margin:44px 0 16px;}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px;}
.prose li{margin-bottom:10px;}
.arthead{max-width:760px;}
.sechead h2{font-size:clamp(30px,3.8vw,50px);line-height:1.05;max-width:20ch;margin-top:16px;}
.sechead{margin-bottom:34px;}

/* scopes table — clean editorial (main-site .ptable recipe) */
.ptable{width:100%;border-collapse:collapse;margin-top:34px;}
.ptable th{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:0 22px 14px 0;border-bottom:1px solid var(--line);}
.ptable td{padding:22px 22px 22px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-1);vertical-align:top;}
.ptable tr:last-child td{border-bottom:none;}
.ptable td.pname{width:44%;}
.ptable .pn{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-0.02em;color:var(--ink);line-height:1.2;}
.scope{display:block;margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink-2);word-break:break-all;line-height:1.5;}
.tablewrap{overflow-x:auto;}
.tablewrap .ptable{min-width:640px;}
.tablecap{margin-top:22px;font-size:14px;color:var(--ink-2);max-width:60ch;}
.tablecap a{color:var(--ink-1);}

/* limited-use statement box (main-site .answer recipe) */
.answer{background:var(--tint-sky-2);border-radius:var(--r-tile);padding:26px 30px;max-width:680px;}
.answer .al{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal);margin:0 0 8px;}
.answer p{margin:0 0 14px;font-size:18px;line-height:1.6;color:var(--ink);}
.answer p:last-child{margin-bottom:0;}
.answer a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--magenta);}
.answer a:hover{color:var(--magenta);}

/* direct contact block */
.direct{margin-top:10px;display:flex;gap:56px;flex-wrap:wrap;}
.direct .d h3{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px;}
.direct .d p,.direct .d a{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);letter-spacing:-0.02em;margin:0;text-decoration:none;}
.direct .d a:hover{color:var(--teal);}
.direct .d .dnote{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--ink-2);margin-top:6px;}

/* FOOTER */
.foot{padding:64px var(--gut) 40px;border-top:1px solid var(--line);max-width:1200px;margin:0 auto;}
.foot .brandrow{display:flex;align-items:center;gap:16px;}
.foot img{height:26px;display:block;}
.foot .bd{color:var(--ink-2);font-size:14px;margin-top:14px;max-width:44ch;}
.foot .base{margin-top:36px;font-size:13px;color:var(--ink-2);}
.base a{color:var(--ink-1);text-decoration:none;border-bottom:1px solid var(--line);display:inline-block;padding:5px 2px;margin:-5px -2px;}
.base a:hover{color:var(--teal);}

@media (max-width:900px){
  :root{--gut:24px;}
  section{padding:72px 0;}
}
/* the scope table is the page's key content: stack it on small screens so
   nothing hides behind a horizontal scroll */
@media (max-width:700px){
  .tablewrap{overflow-x:visible;}
  .tablewrap .ptable{min-width:0;}
  .ptable thead{display:none;}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%;}
  .ptable td{padding:0;border-bottom:none;}
  .ptable td.pname{width:100%;}
  .ptable td + td{margin-top:12px;}
  .ptable tr{padding:24px 0;border-bottom:1px solid var(--line);}
  .ptable tr:last-child{border-bottom:none;}
}
@media (max-width:640px){
  .nav .bar{gap:14px;}
  .nav .brand img{display:none;}
  .appname{border-left:none;padding-left:0;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}
@media print{
  .nav,.skip{display:none!important;}
  body{background:#fff;color:#000;}
  section{padding:24px 0;}
}