/* ForgeEPM marketing site — shared design system. Industrial "Mill & Ink" brand. */
:root{
  --galv:#eef0f2; --galv2:#e4e8eb; --ink:#16202b; --ink2:#0f171f; --ink3:#1c2a38;
  --sub:#5b6773; --sub2:#7d8b97; --line:#d7dde2; --line2:#e8ecef; --paper:#ffffff;
  --steel:#2d5f8a; --steelDk:#234c6f; --torch:#e8590c; --torchDk:#c9490a; --torchBg:#fff2e8;
  --torchBtn:#c2450a; --torchBtnDk:#a83c07;   /* AA-contrast orange for white text on buttons/bands */
  --ok:#2f9e44; --warn:#e8a90c;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans','Segoe UI',Roboto,Arial,sans-serif;
  --shadow:0 18px 50px rgba(22,32,43,.10);
  --shadow-sm:0 6px 20px rgba(22,32,43,.07);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--galv);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;line-height:1.04;letter-spacing:-.005em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--cond);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:var(--torch);margin:0 0 10px}
.eyebrow.on-dark{color:#f0873f}
.trust{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px}
.trust .t{font-size:15px;color:#a9b7c2;display:inline-flex;align-items:baseline;gap:6px}
.trust .t b{font-family:var(--cond);font-weight:700;color:#fff;letter-spacing:.01em}
.trust .t::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--torch);align-self:center}
.muted{color:var(--sub)}
.center{text-align:center}
.center .sec-head{margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--cond);font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:16px;padding:13px 24px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.btn.primary{background:var(--torchBtn);color:#fff}
.btn.primary:hover{background:var(--torchBtnDk);transform:translateY(-1px)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:var(--ink2)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.35)}
.btn.ghost.on-dark:hover{border-color:#fff}
.btn.lg{font-size:17px;padding:15px 28px}

/* header */
header.site{position:sticky;top:0;z-index:30;background:rgba(238,240,242,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--cond);font-weight:700;font-size:25px;letter-spacing:.01em;color:var(--ink)}
.logo .em{color:var(--torch)}
.logo .mark{height:36px;width:auto;flex:none;display:block}
nav.main{display:flex;gap:24px;margin-left:auto;align-items:center}
nav.main a{font-family:var(--cond);font-weight:600;font-size:16.5px;letter-spacing:.02em;color:var(--sub);padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a.active{color:var(--ink);border-color:var(--torch)}
nav.main a.cta{margin-left:6px}

/* sections */
section{padding:78px 0}
section.tight{padding:56px 0}
.sec-head{max-width:680px;margin-bottom:42px}
.sec-head h2{font-size:clamp(30px,4.6vw,46px)}
.sec-head p{color:var(--sub);font-size:18px;margin:12px 0 0}
.dark{background:var(--ink);color:#e7edf2;position:relative;overflow:hidden}
.dark .sec-head h2{color:#fff}.dark .sec-head p{color:#a9b7c2}
.dark::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.dark .wrap{position:relative}

/* hero */
.hero{background:radial-gradient(1200px 620px at 80% -12%,rgba(45,95,138,.4),transparent 58%),linear-gradient(180deg,var(--ink) 0%,var(--ink2) 100%);color:#eaf0f5;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.hero .wrap{position:relative;padding:74px 24px 86px}
.hero.split .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(38px,6.2vw,66px);color:#fff}
.hero p.lede{font-size:19px;color:#bcc9d4;max-width:540px;margin:18px 0 28px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero small{display:block;margin-top:18px;color:#8fa0ad;font-size:13.5px}
.hero.page{padding:0}
.hero.page .wrap{padding:64px 24px 60px}
.hero.page h1{font-size:clamp(34px,5.4vw,56px)}
@media(max-width:860px){.hero.split .wrap{grid-template-columns:1fr;gap:26px;padding:56px 24px 62px}.hero .art{display:none}}

/* cards / features */
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 24px;transition:.15s}
.card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.card .ic{width:44px;height:44px;border-radius:10px;background:var(--torchBg);display:grid;place-items:center;margin-bottom:14px;font-size:22px}
.card h3{font-size:22px}
.card p{color:var(--sub);margin:8px 0 0;font-size:15.5px}
.card.dark{background:var(--ink3);border-color:rgba(255,255,255,.09);color:#e7edf2}
.card.dark h3{color:#fff}.card.dark p{color:#a9b7c2}

.featurerow{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:34px 0}
.featurerow.rev .txt{order:2}
@media(max-width:820px){.featurerow,.featurerow.rev{grid-template-columns:1fr;gap:22px}.featurerow.rev .txt{order:0}}
.featurerow h3{font-size:30px;margin-bottom:10px}
.featurerow p{color:var(--sub);font-size:16.5px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm)}

/* checklist */
ul.checks{list-style:none;padding:0;margin:14px 0}
ul.checks li{position:relative;padding:8px 0 8px 30px;font-size:16px}
ul.checks li::before{content:"";position:absolute;left:0;top:14px;width:16px;height:16px;border-radius:50%;background:var(--torchBg);box-shadow:inset 0 0 0 4px var(--torch)}
ul.checks.on-dark li::before{background:rgba(232,89,12,.18)}

/* comparison table */
.cmpwrap{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;background:rgba(255,255,255,.03);border-radius:14px;overflow:hidden}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);font-size:15.5px}
table.cmp thead th{font-family:var(--cond);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:14px;color:#a9b7c2}
table.cmp thead th:nth-child(2){color:var(--torch)}
table.cmp td:first-child{color:#b9c6d1}
table.cmp td.f{color:#fff;font-weight:500}
table.cmp td .chk{color:var(--ok);font-weight:700;margin-right:6px}

/* pricing */
.pricegrid{display:grid;grid-template-columns:1fr .9fr;gap:38px;align-items:start}
@media(max-width:820px){.pricegrid{grid-template-columns:1fr}}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:36px;box-shadow:var(--shadow)}
.pcard .tag{display:inline-block;font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--torchDk);background:var(--torchBg);border-radius:20px;padding:3px 12px;margin-bottom:16px}
.pcard .amt{font-family:var(--cond);font-weight:700;font-size:60px;line-height:1;color:var(--ink)}
.pcard .amt span{font-size:20px;color:var(--sub);font-weight:600}
.pcard .amt small{display:block;font-family:var(--body);font-size:14px;color:var(--sub);font-weight:400;margin-top:6px}

/* FAQ */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-family:var(--cond);font-weight:600;font-size:20px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--torch);font-size:26px;font-family:var(--cond);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line2)}
.faq .a{padding:16px 22px 20px;color:var(--sub);font-size:16px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px;text-align:center}
.stat b{display:block;font-family:var(--cond);font-weight:700;font-size:42px;color:var(--steel);line-height:1}
.stat span{color:var(--sub);font-size:14.5px;display:block;margin-top:6px}
.dark .stat{background:var(--ink3);border-color:rgba(255,255,255,.09)}
.dark .stat b{color:#f0873f}.dark .stat span{color:#a9b7c2}

/* CTA band */
.band{background:linear-gradient(120deg,var(--torchBtn),#cf5310);color:#fff;text-align:center;padding:74px 0}
.band h2{font-size:clamp(28px,4.6vw,44px);color:#fff}
.band p{max-width:580px;margin:12px auto 26px;font-size:18px;color:#fff;opacity:.96}
.band a.link{color:#fff;text-decoration:underline}

/* footer */
footer.site{background:var(--ink2);color:#9fb0bc;padding:52px 0 34px;font-size:14.5px}
footer.site a{color:#cdd8e0}footer.site a:hover{color:#fff}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{font-family:var(--cond);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:#7d8f9c;margin:0 0 12px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
footer.site .logo{color:#fff;font-size:23px;margin-bottom:12px}
footer.site .about{color:#8b9aa6;max-width:280px;font-size:14px}
footer.site .studio{margin-top:30px;border-top:1px solid rgba(255,255,255,.08);padding-top:20px;font-size:13px;color:#7d8f9c;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer.site .studio b{color:#b9c6d1}

/* misc */
.pill{display:inline-block;font-family:var(--cond);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--steel);background:#eaf1f7;border-radius:20px;padding:3px 11px}
.hr{height:1px;background:var(--line);border:0;margin:0}
.kicker{font-family:var(--cond);font-weight:600;font-size:20px;color:var(--ink)}

/* ===== account button + header actions (replaces the hamburger) ===== */
nav.main{margin-left:24px}
.hactions{margin-left:auto;display:flex;gap:10px;align-items:center}
.acctbtn{font-family:var(--cond);font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:15px;padding:10px 18px;border-radius:8px;border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.acctbtn:hover{background:var(--ink2)}
.acctbtn::before{content:"\1F464";font-size:13px}
@media(max-width:820px){
  header.site .bar{flex-wrap:wrap;height:auto;padding:9px 20px;gap:8px}
  nav.main{order:3;width:100%;margin:0;gap:10px 16px;flex-wrap:wrap;position:static;transform:none;flex-direction:row;background:none;box-shadow:none;border:0;padding:6px 0 2px}
  nav.main a{padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
  nav.main a.active{border-color:var(--torch);color:var(--ink)}
  .hactions{margin-left:auto;gap:8px}
  .hactions .btn,.acctbtn{font-size:13px;padding:9px 13px}
  .logo{font-size:22px}
}
/* ===== account modal ===== */
.acct-ov{position:fixed;inset:0;background:rgba(15,23,31,.55);display:grid;place-items:center;z-index:80;padding:20px;animation:fadein .15s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.acct-modal{background:var(--paper);border-radius:16px;padding:26px;width:380px;max-width:100%;box-shadow:0 30px 80px rgba(22,32,43,.4);position:relative}
.acct-x{position:absolute;top:14px;right:14px;background:none;border:0;font-size:16px;color:var(--sub);cursor:pointer}
.acct-head{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.acct-mark{height:34px;width:auto}
.acct-t{font-family:var(--cond);font-weight:700;font-size:20px;color:var(--ink);line-height:1.1}
.acct-s{color:var(--sub);font-size:13px}
.acct-f{display:block;margin-bottom:12px}
.acct-f span{display:block;font-size:12.5px;color:var(--sub);margin-bottom:4px}
.acct-f input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:15px}
.acct-f input:focus{outline:none;border-color:var(--torch)}
.acct-err{color:#c0392b;font-size:12.5px;min-height:16px;margin-top:8px}
.acct-err a{color:#c0392b;text-decoration:underline}
.acct-open{display:block;text-align:center;margin-top:12px;color:var(--steel);font-family:var(--cond);font-weight:600;font-size:15px}
/* ===== pricing toggle ===== */
.seg{display:inline-flex;background:var(--galv2);border-radius:10px;padding:4px;gap:4px;margin-bottom:22px}
.seg button{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase;border:0;background:none;color:var(--sub);padding:8px 18px;border-radius:7px;cursor:pointer}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)}
/* page-switch fade (artifact SPA) */
.pg.on{animation:pgin .28s ease}
@keyframes pgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ===== accessibility: skip link, focus rings, reduced motion ===== */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-family:var(--cond);font-weight:700;letter-spacing:.03em}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,.acctbtn:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--torch);outline-offset:2px;border-radius:4px}
.demoStage svg .mem:focus-visible{outline:none;stroke-width:11;filter:drop-shadow(0 0 3px var(--torch))}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}