@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════
   Omerica Studios — shared SAMPLE-demo design system.
   Used by the per-service sample pages (crm, payroll, ops-hub,
   booking, tools, automations, portal, scoping, inventory, ai).
   Watermarked, branded, privacy-safe. sample data only.
   ════════════════════════════════════════════════════════════════ */
:root{
  --forest:#1c5d3c; --forest-deep:#0e2e1d; --forest-ink:#08210f;
  --gold:#c9a049; --gold-soft:#e6c87a;
  --cream:#fbf6e9; --cream-2:#f4ecd8; --paper:#fffdf7;
  --ink:#16241c; --ink-2:#46584d; --ink-3:#7e8a82;
  --rule:rgba(14,46,29,.14); --rule-strong:rgba(14,46,29,.26);
  --red:#b3402f; --amber:#b07a1d; --green:#1c7d4d; --blue:#2c5f7e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --shadow:0 18px 44px rgba(14,46,29,.10);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);
  background-image:
    radial-gradient(circle at 0% 0%,rgba(201,160,73,.07),transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='170'%3E%3Ctext x='0' y='100' transform='rotate(-22 0 100)' font-family='Georgia,serif' font-size='30' fill='%231c5d3c' fill-opacity='0.05' font-weight='700' letter-spacing='5'%3ESAMPLE%3C/text%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;}

/* demo banner */
.demo-banner{background:linear-gradient(135deg,var(--forest-deep),var(--forest-ink));color:var(--paper);border-bottom:1px solid rgba(201,160,73,.4);}
.demo-banner__in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:9px 22px;font-size:12.5px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(201,160,73,.18);flex:none;}
.demo-banner strong{color:var(--gold-soft);letter-spacing:.04em;}
.demo-banner span{color:rgba(251,246,233,.78);}
.demo-banner a{margin-left:auto;color:var(--gold-soft);text-decoration:none;font-weight:700;border:1px solid rgba(201,160,73,.5);border-radius:999px;padding:6px 13px;white-space:nowrap;}
.demo-banner a:hover{background:rgba(201,160,73,.16);}

/* header */
header.dash{padding:24px 0 4px;}
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.biz{display:flex;align-items:center;gap:14px;}
.biz__mark{width:48px;height:48px;border-radius:12px;flex:none;background:linear-gradient(150deg,var(--forest),var(--forest-deep));display:grid;place-items:center;color:var(--gold);font-family:var(--serif);font-size:23px;border:1px solid rgba(201,160,73,.5);}
.biz__name{font-family:var(--serif);font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.05;margin:0;}
.biz__sub{font-size:13px;color:var(--ink-2);margin-top:4px;}
.biz__sub b{color:var(--forest);}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pill{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule-strong);border-radius:999px;padding:6px 12px;color:var(--ink-2);background:var(--paper);}
.pill--demo{background:rgba(201,160,73,.14);border-color:rgba(201,160,73,.5);color:#8a6a1d;}
.pill--live{background:rgba(28,125,77,.1);border-color:rgba(28,125,77,.4);color:var(--green);}
.pill--warm{background:rgba(176,122,29,.14);border-color:rgba(176,122,29,.4);color:var(--amber);}
.lede{max-width:70ch;color:var(--ink-2);font-size:14px;line-height:1.6;margin:12px 0 0;}

/* KPI / glance row */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:20px 0;}
.kpi{background:var(--paper);border:1px solid var(--rule);border-radius:13px;padding:15px;box-shadow:var(--shadow);}
.kpi__label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.kpi__val{font-family:var(--serif);font-size:1.55rem;line-height:1.05;margin:8px 0 5px;font-variant-numeric:lining-nums tabular-nums;}
.kpi__sub{font-size:11px;color:var(--ink-3);}
.up{color:var(--green);} .down{color:var(--red);} .flat{color:var(--ink-3);}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding-bottom:30px;}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:20px;box-shadow:var(--shadow);min-width:0;}
.c12{grid-column:span 12;} .c8{grid-column:span 8;} .c6{grid-column:span 6;} .c5{grid-column:span 5;} .c4{grid-column:span 4;} .c7{grid-column:span 7;} .c3{grid-column:span 3;}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;}
.card__title{font-family:var(--serif);font-size:1.16rem;margin:0;}
.card__meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:0 8px 9px 0;border-bottom:1px solid var(--rule);}
td{padding:11px 8px 11px 0;border-bottom:1px solid var(--rule);vertical-align:middle;}
tr:last-child td{border-bottom:0;}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;}
.tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-block;}
.tag--red{background:rgba(179,64,47,.12);color:var(--red);}
.tag--amber{background:rgba(176,122,29,.16);color:var(--amber);}
.tag--green{background:rgba(28,125,77,.12);color:var(--green);}
.tag--blue{background:rgba(44,95,126,.12);color:var(--blue);}
.tag--gray{background:rgba(14,46,29,.08);color:var(--ink-2);}

/* pipeline / columns */
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.col{background:var(--cream);border:1px solid var(--rule);border-radius:12px;padding:10px;}
.col__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.col__name{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);}
.col__count{font-size:11px;font-weight:800;color:var(--gold);background:rgba(201,160,73,.16);border-radius:999px;padding:1px 8px;}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:9px;padding:8px 10px;margin-bottom:7px;font-size:12.5px;line-height:1.3;}
.tile:last-child{margin-bottom:0;}
.tile small{display:block;color:var(--ink-3);font-size:11px;margin-top:2px;}

/* list rows (directory / sop / checklist) */
.rows{display:grid;gap:9px;}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 12px;background:var(--cream);border:1px solid var(--rule);border-radius:10px;font-size:13.5px;}
.row b{color:var(--ink);} .row small{color:var(--ink-3);font-size:11.5px;display:block;margin-top:2px;}

/* progress bar */
.bar{height:8px;border-radius:999px;background:var(--cream-2);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--forest),#2a7d52);}
.bar.warn i{background:var(--amber);} .bar.bad i{background:var(--red);}

/* keyvals */
.kv{display:grid;gap:10px;}
.kv__row{display:grid;grid-template-columns:130px 1fr;gap:10px;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--rule);}
.kv__row:last-child{border-bottom:0;}
.kv__k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:1px;}
.kv__v b{color:var(--forest);}

/* buttons */
.btn-demo{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--forest);background:rgba(201,160,73,.14);border:1px solid rgba(201,160,73,.5);border-radius:999px;padding:7px 13px;cursor:not-allowed;white-space:nowrap;}

/* locked */
.locked{position:relative;overflow:hidden;}
.locked__blur{filter:blur(4px);opacity:.5;pointer-events:none;user-select:none;}
.locked__over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;background:linear-gradient(180deg,rgba(251,246,233,.2),rgba(251,246,233,.82));padding:14px;}
.locked__over .lk{width:30px;height:30px;border-radius:9px;background:var(--forest);color:var(--gold);display:grid;place-items:center;border:1px solid rgba(201,160,73,.5);}
.locked__over b{font-family:var(--serif);font-size:1.02rem;}
.locked__over span{font-size:11.5px;color:var(--ink-2);max-width:32ch;}

/* CTA + footer */
.cta{background:linear-gradient(135deg,var(--forest-deep),var(--forest-ink));color:var(--paper);border:1px solid rgba(201,160,73,.4);border-radius:18px;padding:28px 26px;margin:6px 0 40px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;position:relative;overflow:hidden;}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 0%,rgba(201,160,73,.18),transparent 55%);pointer-events:none;}
.cta__t{position:relative;max-width:64ch;}
.cta__t h3{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0 0 8px;color:var(--paper);}
.cta__t p{margin:0;color:rgba(251,246,233,.82);font-size:13.5px;line-height:1.6;}
.cta__btn{position:relative;background:var(--gold);color:var(--forest-ink);text-decoration:none;font-weight:800;letter-spacing:.04em;padding:13px 21px;border-radius:999px;white-space:nowrap;border:1px solid var(--gold-soft);}
.cta__btn:hover{background:var(--gold-soft);}
footer.fine{text-align:center;color:var(--ink-3);font-size:11.5px;padding:0 0 40px;line-height:1.6;}

/* nav between demos */
.demo-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px;}
.demo-nav a{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;background:var(--paper);}
.demo-nav a:hover{border-color:var(--gold);color:var(--forest);}

@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(3,1fr);}
  .c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12;}
  .cols{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .kv__row{grid-template-columns:1fr;gap:3px;}
  .demo-banner a{margin-left:0;}
  .cta{flex-direction:column;align-items:flex-start;}
}
@media (max-width:430px){ .kpis{grid-template-columns:1fr 1fr;} .cols{grid-template-columns:1fr;} }