/* ============================================================
   FAIRMARK — shared design system
   Bricolage Grotesque (display) + Geist (text)
   Brand blue #2D5BFF · Mint #00D6A2 · Ink #0A0E1A
   ============================================================ */

:root{
  /* brand */
  --brand:#2D5BFF; --brand-2:#1F47E0; --brand-3:#6B8EFF; --brand-soft:#EBF0FF;
  --mint:#00D6A2; --mint-2:#00B98C; --mint-soft:#DCFCEF;
  /* ink / text */
  --ink:#0A0E1A; --ink-2:#141A2E; --ink-3:#1C2438;
  --text:#3D4456; --text-2:#545B6E; --muted:#6B7385; --faint:#6C7488;
  /* surfaces */
  --bg:#FFFFFF; --bg-2:#F6F8FC; --bg-3:#EEF2F9;
  --line:#E5E8EF; --line-2:#EDF0F6; --line-soft:#F1F3F8;
  /* status */
  --good:#16A66B; --warn:#E08A2B; --bad:#E5484D;
  --warn-soft:#FCF1DE;
  /* portals — one canonical accent + tint per portal (staff blue = brand) */
  --portal-staff:var(--brand);       --portal-staff-tint:#EEF2FF;
  --portal-landlord:#B0592A;         --portal-landlord-tint:#FBEFE4;
  --portal-participant:#0E7C6B;      --portal-participant-tint:#E4F4F1;
  /* type */
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* shape */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  /* shadow */
  --sh-sm:0 1px 2px rgba(10,14,26,.06), 0 1px 3px rgba(10,14,26,.04);
  --sh-md:0 4px 8px rgba(10,14,26,.04), 0 12px 28px -8px rgba(10,14,26,.12);
  --sh-lg:0 8px 16px rgba(10,14,26,.06), 0 40px 80px -16px rgba(10,14,26,.22);
  --sh-brand:0 6px 18px rgba(45,91,255,.28), 0 16px 40px -10px rgba(45,91,255,.34);
  /* layout */
  --wrap:1240px;
  --nav-h:68px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:0;color:inherit}
img,svg,video{display:block;max-width:100%}
ul{list-style:none}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* skip-to-content link (injected first in body by site.js) */
.skip{position:fixed;top:10px;left:10px;z-index:400;background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:11px 18px;border-radius:var(--r-sm);transform:translateY(-150%);transition:transform .2s}
.skip:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
[id="main"]:focus{outline:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap--narrow{max-width:920px}
.section{padding:104px 0}
.section--tight{padding:72px 0}
@media(max-width:860px){ .section{padding:72px 0} .wrap{padding:0 22px} }

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:500;font-size:clamp(46px,6.2vw,90px);line-height:.98;letter-spacing:-.035em}
.h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.4vw,60px);line-height:1.04;letter-spacing:-.028em}
.h2{font-family:var(--display);font-weight:600;font-size:clamp(27px,3vw,40px);line-height:1.08;letter-spacing:-.022em}
.h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.015em}
.grad{
  background:linear-gradient(115deg,var(--brand) 0%,var(--brand-3) 48%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:italic;font-weight:400;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--text)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);padding:6px 13px;border-radius:var(--r-pill);
}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(45,91,255,.5);animation:pulse 2.2s infinite}
.kicker--mint{color:var(--mint-2);background:var(--mint-soft)}
.kicker--mint .dot{background:var(--mint-2);animation-name:pulseMint}
.kicker--ghost{color:#fff;background:rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.kicker--ghost .dot{background:var(--mint)}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(45,91,255,0)}100%{box-shadow:0 0 0 0 rgba(45,91,255,0)}}
@keyframes pulseMint{70%{box-shadow:0 0 0 7px rgba(0,214,162,0)}100%{box-shadow:0 0 0 0 rgba(0,214,162,0)}}
.eyebrow-lbl{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:12px 22px;border-radius:var(--r-pill);
  border:1px solid transparent;white-space:nowrap;
  transition:transform .2s, box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn--primary:hover{background:var(--brand-2);transform:translateY(-1px)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--bg-2);border-color:var(--line);transform:translateY(-1px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--ink-3);transform:translateY(-1px)}
.btn--onDark{background:#fff;color:var(--ink)}
.btn--onDark:hover{background:var(--bg-2);color:var(--brand)}
.btn--ghostDark{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22)}
.btn--ghostDark:hover{background:rgba(255,255,255,.12)}
.btn--lg{font-size:16px;padding:15px 30px}
.btn--sm{font-size:13.5px;padding:9px 16px}
.btn .arrow{transition:transform .25s;display:inline-block}
.btn:hover .arrow{transform:translateX(3px)}
.linkarrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--brand)}
.linkarrow .arrow{transition:transform .25s}
.linkarrow:hover .arrow{transform:translateX(3px)}

/* ============================================================
   NAV  (injected by site.js)
   ============================================================ */
.nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line-soft);transition:background .3s, border-color .3s}
.nav--onDark{background:rgba(10,14,26,.4);border-bottom-color:rgba(255,255,255,.08)}
.nav--onDark.nav--scrolled{background:rgba(10,14,26,.82)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.03em;color:var(--ink)}
.nav--onDark .brand{color:#fff}
.brand__mark{width:30px;height:30px;flex-shrink:0}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--text-2);padding:8px 14px;border-radius:var(--r-sm);transition:color .2s,background .2s}
.nav__links a:hover{color:var(--ink);background:var(--bg-2)}
.nav__links a.active{color:var(--brand)}
.nav--onDark .nav__links a{color:rgba(255,255,255,.74)}
.nav--onDark .nav__links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav--onDark .nav__links a.active{color:#fff}
.nav__cta{display:flex;align-items:center;gap:8px}
.nav__burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);align-items:center;justify-content:center}
.nav__burger:hover{background:var(--bg-2)}
.nav--onDark .nav__burger:hover{background:rgba(255,255,255,.1)}
.nav__burger svg{width:22px;height:22px}
@media(max-width:980px){
  .nav__links{display:none}
  .nav__cta .btn--login{display:none}
  .signin{display:none}
  .nav__burger{display:flex}
}

/* sign-in dropdown */
.signin{position:relative}
.signin__chev{transition:transform .2s;margin-left:-2px}
.signin.open .signin__chev{transform:rotate(180deg)}
.pmenu{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:8px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.signin.open .pmenu{opacity:1;transform:none;pointer-events:auto}
.pmenu__head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 12px 8px}
.pmenu__item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--r-md);transition:background .18s}
.pmenu__item:hover{background:var(--bg-2)}
.pmenu__ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.pmenu__ic svg{width:20px;height:20px}
.pmenu__txt{display:flex;flex-direction:column;line-height:1.25}
.pmenu__txt b{font-size:14.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.pmenu__txt i{font-size:12.5px;color:var(--muted);font-style:normal}
.soon-tag{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mint-2);background:var(--mint-soft);padding:2px 6px;border-radius:var(--r-pill);font-style:normal}
.pmenu__item--soon{opacity:.92}
.pmenu__arr{width:17px;height:17px;color:var(--faint);margin-left:auto;transition:transform .2s}
.pmenu__item:hover .pmenu__arr{transform:translateX(2px);color:var(--brand)}

/* mobile portals in sheet */
.navsheet__portals{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.navsheet__plabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 12px 6px}
.navsheet__portals .pmenu__item{padding:12px}
/* mobile sheet */
.navsheet{position:fixed;inset:0;z-index:300;background:rgba(10,14,26,.4);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
.navsheet.open{opacity:1;pointer-events:auto}
.navsheet__panel{position:absolute;top:0;right:0;width:min(340px,86vw);height:100%;background:#fff;box-shadow:var(--sh-lg);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:22px}
.navsheet.open .navsheet__panel{transform:none}
.navsheet__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.navsheet__close{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center}
.navsheet__close:hover{background:var(--bg-2)}
.navsheet__links{display:flex;flex-direction:column;gap:2px}
.navsheet__links a{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-.02em;color:var(--ink);padding:12px 10px;border-radius:var(--r-sm)}
.navsheet__links a:hover,.navsheet__links a.active{background:var(--bg-2);color:var(--brand)}
.navsheet__cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:18px}
.navsheet__cta .btn{width:100%;justify-content:center}

/* ============================================================
   FOOTER  (injected by site.js)
   ============================================================ */
.foot{background:var(--ink);color:rgba(255,255,255,.62);padding:84px 0 36px;position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;top:-40%;left:50%;width:120%;height:80%;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 20% 50%,rgba(45,91,255,.18),transparent 60%),radial-gradient(ellipse 50% 60% at 80% 50%,rgba(0,214,162,.12),transparent 60%);pointer-events:none}
.foot>*{position:relative}
.foot__top{display:grid;grid-template-columns:2.3fr 1fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:32px}
.foot .brand{color:#fff;margin-bottom:16px}
.foot__manifesto{font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.6;max-width:330px}
.foot__col h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:16px}
.foot__col li{padding:5px 0}
.foot__col a{color:rgba(255,255,255,.66);font-size:14.5px;transition:color .2s}
.foot__col a:hover{color:#fff}
.foot__news p{font-size:13.5px;color:rgba(255,255,255,.55);margin-bottom:12px;line-height:1.5}
.foot__form{display:flex;gap:8px}
.foot__form input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);padding:10px 12px;color:#fff;font:inherit;font-size:14px}
.foot__form input::placeholder{color:rgba(255,255,255,.4)}
.foot__form input:focus{outline:none;border-color:var(--brand-3)}
.foot__form button{background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:0 14px;font-weight:600;font-size:14px;white-space:nowrap}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:rgba(255,255,255,.46)}
.foot__badges{display:flex;gap:10px;align-items:center}
.foot__badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:5px 11px}
@media(max-width:880px){
  .foot__top{grid-template-columns:1fr 1fr;gap:34px}
  .foot__col--brand{grid-column:1/-1}
  .foot__news{grid-column:1/-1}
}

/* ============================================================
   reusable components
   ============================================================ */
/* card */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-2)}

/* feature card */
.feat{padding:30px}
.feat__icon{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:18px}
.feat__icon svg{width:23px;height:23px}
.ic-blue{background:var(--brand-soft);color:var(--brand)}
.ic-mint{background:var(--mint-soft);color:var(--mint-2)}
.ic-ink{background:var(--ink);color:#fff}

/* portal badge — one tinted rounded square per portal; icon stroke = accent.
   radius = 25% of badge size (font-size == badge px, radius = .25em). */
.portal-badge{display:grid;place-items:center;flex:none;border-radius:.25em;
  background:var(--portal-tint);color:var(--portal-accent)}
.portal-badge .portal-icon{display:block}
.portal-badge--staff{--portal-tint:var(--portal-staff-tint);--portal-accent:var(--portal-staff)}
.portal-badge--landlord{--portal-tint:var(--portal-landlord-tint);--portal-accent:var(--portal-landlord)}
.portal-badge--participant{--portal-tint:var(--portal-participant-tint);--portal-accent:var(--portal-participant)}
.portal-badge--72{width:72px;height:72px;font-size:72px}
.portal-badge--72 .portal-icon{width:40px;height:40px}
.portal-badge--44{width:44px;height:44px;font-size:44px}
.portal-badge--44 .portal-icon{width:24px;height:24px}
.portal-badge--32{width:32px;height:32px;font-size:32px}
.portal-badge--32 .portal-icon{width:18px;height:18px}
.portal-badge--24{width:24px;height:24px;font-size:24px}
.portal-badge--24 .portal-icon{width:14px;height:14px}
/* monochrome inline portal icon (tabs) — inherits the control's text color */
.portal-icon{color:currentColor}
.feat__title{font-family:var(--display);font-weight:600;font-size:19.5px;letter-spacing:-.015em;margin-bottom:9px}
.feat__desc{font-size:14.5px;color:var(--text);line-height:1.58}

/* pills / chips */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill)}
.pill--good{background:var(--mint-soft);color:var(--good)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--blue{background:var(--brand-soft);color:var(--brand)}
.pill--ghost{background:var(--bg-2);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--text-2);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px}
.chip svg{width:15px;height:15px;color:var(--mint-2)}

/* checkrow */
.checkrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.check::before{content:"";width:18px;height:18px;flex-shrink:0;border-radius:50%;background:var(--mint-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11L12 5.5' stroke='%2300A077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.checkrow--onDark .check{color:rgba(255,255,255,.78)}

/* stat */
.statbig{font-family:var(--display);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.03em}
.statbig .grad{font-style:normal}

/* section heading block */
.sec-head{max-width:720px}
.sec-head--center{margin:0 auto;text-align:center}
.sec-head .h2{margin-top:16px}
.sec-head .lede{margin-top:16px}

/* image / video placeholder */
.ph{position:relative;background:
    repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 11px,var(--bg-3) 11px,var(--bg-3) 22px);
  border:1px solid var(--line);border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden}
.ph__tag{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);background:rgba(255,255,255,.86);padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line)}
.ph--dark{background:repeating-linear-gradient(135deg,#11162a,#11162a 11px,#161d36 11px,#161d36 22px);border-color:rgba(255,255,255,.08)}
.ph--dark .ph__tag{background:rgba(10,14,26,.6);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.14)}

/* avatar placeholder (team) */
.avatar{position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:
    radial-gradient(120% 120% at 30% 20%, var(--brand-soft), transparent 60%),
    repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 10px,var(--bg-3) 10px,var(--bg-3) 20px);
  border:1px solid var(--line);display:grid;place-items:center}
.avatar__mono{position:absolute;bottom:10px;left:10px;font-family:var(--mono);font-size:11px;color:var(--muted);background:rgba(255,255,255,.82);padding:4px 9px;border-radius:var(--r-pill)}
.avatar__initials{font-family:var(--display);font-weight:600;font-size:34px;color:var(--brand);opacity:.45;letter-spacing:-.02em}

/* dark band */
.band-dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.band-dark .h2,.band-dark .display,.band-dark .h1{color:#fff}
.mesh{position:absolute;inset:0;pointer-events:none;z-index:0}
.mesh::before{content:"";position:absolute;inset:0;background:
    radial-gradient(ellipse 50% 50% at 15% 0%,rgba(45,91,255,.34),transparent 60%),
    radial-gradient(ellipse 50% 60% at 88% 30%,rgba(0,214,162,.22),transparent 60%),
    radial-gradient(ellipse 70% 60% at 60% 110%,rgba(45,91,255,.18),transparent 60%)}
.dotgrid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;z-index:0;mask:linear-gradient(180deg,#000,transparent)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  /* stop ambient/infinite motion for users who ask for less */
  .hero__bg .blob,.kicker .dot,.appui__live .dot,.path__badge--live .dot,
  .hero__mock,.pf-mock{animation:none!important}
  .hero__video{transition:none}
  *,*::before,*::after{scroll-behavior:auto!important}
}

/* divider tick */
.toprule{border-top:1px solid var(--line)}

/* ---------- portals band (reusable) ---------- */
.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.portals{grid-template-columns:1fr}}
.portal{display:flex;flex-direction:column;padding:28px;position:relative;overflow:hidden}
.portal__ic{width:50px;height:50px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:18px}
.portal__ic svg{width:25px;height:25px}
.portal>.portal-badge{margin-bottom:18px}
.portal__title{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em;margin-bottom:7px}
.portal__desc{font-size:14px;color:var(--text);line-height:1.55;flex:1}
.portal__list{margin:16px 0 20px;display:flex;flex-direction:column;gap:8px}
.portal__list span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.portal__list svg{width:14px;height:14px;color:var(--mint-2);flex-shrink:0}
.portal__cta{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14.5px;color:var(--brand);padding-top:16px;border-top:1px solid var(--line)}
.portal__cta .arrow{transition:transform .25s}
.portal:hover .portal__cta .arrow{transform:translateX(3px)}

/* ---------- inner-page hero (reusable) ---------- */
.phero{position:relative;padding:72px 0 8px;text-align:center;overflow:hidden}
.phero__h{margin:18px auto 0;max-width:16ch}
.phero__lede{max-width:600px;margin:20px auto 0}
.phero__cta{display:inline-flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.phero--dark{background:var(--ink);color:#fff;padding-bottom:64px}
.phero--dark .phero__lede{color:rgba(255,255,255,.8)}
.phero--dark .h1,.phero--dark .display{color:#fff}

/* two-col content block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split--rev .split__media{order:-1}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:30px}.split--rev .split__media{order:0}}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:28px;position:relative}
.step__n{font-family:var(--display);font-weight:600;font-size:15px;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.step__t{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.step__d{font-size:14px;color:var(--text);line-height:1.55}

/* value tiles */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.values{grid-template-columns:1fr}}

/* integration logos */
.intgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.intgrid{grid-template-columns:repeat(2,1fr)}}
.intchip{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;font-weight:600;font-size:14.5px;color:var(--text)}
.intchip svg{width:22px;height:22px;color:var(--muted)}

/* ---------- product mock (shared dashboard) ---------- */
.mock{border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden}
.appui{display:grid;grid-template-columns:74px 1fr;background:var(--bg-2);min-height:540px}
.appui__side{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:6px}
.appui__logo{width:30px;height:30px;margin-bottom:8px}
.appui__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:.2s}
.appui__ic svg{width:19px;height:19px}
.appui__ic:hover{background:var(--bg-2);color:var(--ink)}
.appui__ic.active{background:var(--brand-soft);color:var(--brand)}
.appui__main{display:grid;grid-template-rows:auto 1fr;min-width:0}
.appui__top{background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.appui__crumb{font-size:13px;color:var(--muted);font-weight:500}
.appui__crumb b{color:var(--ink);font-weight:600}
.appui__search{flex:1;max-width:280px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.appui__live{display:inline-flex;align-items:center;gap:6px;background:var(--mint-soft);color:var(--good);font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill)}
.appui__live .dot{width:6px;height:6px;border-radius:50%;background:var(--good);animation:pulseMint 2.2s infinite}
.appui__body{padding:22px;display:grid;gap:16px;align-content:start}
.appui__h{display:flex;justify-content:space-between;align-items:center}
.appui__title{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.018em;color:var(--ink)}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.statc{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.statc__lbl{font-size:11.5px;color:var(--muted);font-weight:500;margin-bottom:10px}
.statc__row{display:flex;justify-content:space-between;align-items:flex-start}
.statc__val{font-family:var(--display);font-weight:600;font-size:26px;line-height:1;letter-spacing:-.025em}
.statc__val .u{font-size:13px;color:var(--muted);font-weight:500;margin-left:2px}
.appui__panels{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.panel__h{font-size:13px;font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.panel__h .pill{font-weight:600}
/* bar chart */
.bars{display:flex;align-items:flex-end;gap:9px;height:120px;padding-top:8px}
.bars .bar{flex:1;background:var(--brand-soft);border-radius:5px 5px 0 0;position:relative;min-height:8px;transition:height .5s}
.bars .bar.hi{background:linear-gradient(180deg,var(--brand),var(--brand-3))}
.bars .bar.mint{background:linear-gradient(180deg,var(--mint),var(--mint-2))}
/* worklist */
.wl{display:flex;flex-direction:column;gap:9px}
.wl__row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.wl__dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.wl__name{font-weight:500;color:var(--ink)}
.wl__meta{color:var(--muted);margin-left:auto;font-size:11.5px}
@media(max-width:880px){
  .appui{grid-template-columns:1fr}
  .appui__side{display:none}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .appui__panels{grid-template-columns:1fr}
  .appui__search{display:none}
}