:root {
  --paper: #f3f1eb;
  --paper-2: #ebe8df;
  --surface: #ffffff;
  --ink: #14191f;
  --ink-2: #26303a;
  --muted: #69706f;
  --line: #d8d5cd;
  --line-dark: #313a43;
  --gold: #d0a72f;
  --gold-deep: #9b7713;
  --navy: #182230;
  --navy-2: #222d3b;
  --ok: #536b50;
  --max: 1220px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 55px rgba(18, 24, 30, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: absolute; left: -9999px; top: 10px; z-index: 9999;
  background: var(--ink); color: #fff; padding: 10px 14px;
}
.skip-link:focus { left: 10px; }

.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.section { padding: 104px 0; }
.section-tight { padding: 72px 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 750;
  color: var(--gold-deep); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--gold-deep); }
h1,h2,h3,h4 { margin: 0; line-height: 1.08; letter-spacing: -.035em; font-weight: 690; }
h1 { font-size: clamp(3rem, 6vw, 6.3rem); max-width: 920px; }
h2 { font-size: clamp(2.25rem, 4.1vw, 4.5rem); max-width: 840px; }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
p { margin: 0; }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.32rem); color: var(--muted); max-width: 720px; line-height: 1.65; }
.small { font-size: .92rem; color: var(--muted); }
.eyebrow { color: var(--muted); font-size: .95rem; font-weight: 650; }

.btn {
  min-height: 48px; padding: 12px 19px; border: 1px solid transparent; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: #242b32; }
.btn-secondary { background: transparent; color: var(--ink); border-color: #a8aaa6; }
.btn-secondary:hover { border-color: var(--ink); }
.btn-gold { background: var(--gold); color: #1c1a12; border-color: var(--gold); }
.btn-light { background: #fff; color: var(--ink); border-color: rgba(255,255,255,.8); }
.btn-link { padding: 0; min-height: auto; border: 0; border-radius: 0; border-bottom: 1px solid currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,241,235,.94); backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(216,213,205,.85);
}
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; display: block; }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 1.05rem; letter-spacing: -.02em; }
.brand-copy span { font-size: .68rem; color: var(--muted); margin-top: 5px; letter-spacing: .08em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: .94rem; font-weight: 650; }
.nav-links a:not(.btn) { color: #3a4248; }
.nav-links a:hover:not(.btn), .nav-links a[aria-current="page"] { color: #000; }
.nav-actions { display: flex; gap: 10px; }
.menu-toggle { display: none; border: 1px solid var(--line); background: transparent; width: 44px; height: 44px; border-radius: 10px; }

.announcement {
  border-bottom: 1px solid var(--line);
  font-size: .84rem; color: #51595d;
}
.announcement .container { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.announcement strong { color: var(--ink); }

.hero { padding: 92px 0 74px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(520px, 1.04fr); gap: 58px; align-items: center; }
.hero h1 { font-size: clamp(3.55rem, 6.4vw, 6.5rem); }
.hero h1 em { color: var(--gold-deep); font-style: normal; }
.hero-copy .lead { margin-top: 26px; max-width: 650px; }
.hero-note { margin-top: 22px; display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; color: var(--muted); }
.hero-note span::before { content: "•"; margin-right: 8px; color: var(--gold-deep); }

.product-window {
  background: #f8f8f5; border: 1px solid #c9c8c2; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow);
  transform: rotate(.3deg);
}
.window-bar { height: 42px; border-bottom: 1px solid #dddcd6; background: #edede8; display: flex; align-items: center; padding: 0 15px; gap: 7px; }
.window-dot { width: 8px; height: 8px; border-radius: 50%; background: #b6b5b0; }
.app-shell { display: grid; grid-template-columns: 176px 1fr; min-height: 520px; }
.app-side { background: var(--navy); color: #fff; padding: 20px 14px; }
.app-logo { display: flex; align-items: center; gap: 9px; font-size: .84rem; font-weight: 800; padding: 2px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 12px; }
.app-logo .mini-mark { width: 22px; height: 22px; }
.app-menu { display: grid; gap: 5px; margin-top: 10px; }
.app-menu span { padding: 9px 10px; border-radius: 7px; font-size: .72rem; color: #c9d0d7; display: flex; align-items: center; gap: 9px; }
.app-menu span.active { background: rgba(255,255,255,.10); color: #fff; }
.app-menu i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 2px; display: inline-block; }
.app-main { background: #f5f6f5; padding: 24px; }
.app-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 21px; }
.app-title strong { display:block; font-size: 1rem; }
.app-title span { font-size: .67rem; color: #7b8181; }
.user-chip { display:flex; align-items:center; gap:8px; font-size:.68rem; color:#646b6f; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #d5d6d0; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.metric { background:#fff; border:1px solid #dedfdc; border-radius:10px; padding:14px; }
.metric-label { font-size:.63rem; color:#737a7e; }
.metric-value { font-size:1.45rem; font-weight:750; margin-top:4px; line-height:1; }
.metric-meta { font-size:.58rem; color:#979c9e; margin-top:8px; }
.app-row { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }
.panel { background:#fff; border:1px solid #dedfdc; border-radius:10px; padding:16px; }
.panel-title { font-size:.72rem; font-weight:750; margin-bottom:14px; }
.chart-bars { height:150px; display:flex; align-items:flex-end; gap:10px; border-bottom:1px solid #e1e1dd; padding: 0 4px 0; }
.bar { flex:1; background:#bbb9af; border-radius:3px 3px 0 0; }
.bar.gold { background:#b59435; }
.list-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #efefeb; font-size:.63rem; color:#596066; }
.list-row:last-child { border-bottom:0; }

.trust-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #efede6; }
.trust-grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); }
.trust-item { padding: 29px 24px; border-right: 1px solid var(--line); min-height: 110px; display: flex; flex-direction: column; justify-content: center; }
.trust-item:last-child { border-right: 0; }
.trust-item strong { font-size: 1rem; }
.trust-item span { color: var(--muted); font-size: .82rem; margin-top: 6px; }
.trust-lead { color: var(--muted); font-size: .91rem; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 56px; }
.section-head .lead { max-width: 520px; }

.editorial-grid { display: grid; grid-template-columns: 1.15fr .85fr; border-top: 1px solid var(--line); }
.editorial-main { padding: 46px 50px 46px 0; border-right: 1px solid var(--line); }
.editorial-side { padding: 46px 0 46px 50px; }
.editorial-main h3 { font-size: clamp(2rem, 3vw, 3.2rem); max-width: 660px; }
.editorial-main p { margin-top: 20px; color: var(--muted); max-width: 640px; }
.feature-list { display: grid; }
.feature-list a, .feature-list .feature-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 15px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--line); }
.feature-num { font-size: .73rem; color: #8b8c87; padding-top: 2px; }
.feature-list strong { font-size: .98rem; }
.feature-list span.desc { display:block; color:var(--muted); font-size:.82rem; margin-top:3px; }
.feature-arrow { color: #7d817f; }

.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.module-card { background: var(--paper); padding: 34px; min-height: 260px; position: relative; }
.module-index { font-size: .72rem; color: #8d8e88; margin-bottom: 44px; }
.module-card h3 { font-size: 1.45rem; }
.module-card p { color: var(--muted); font-size: .92rem; margin-top: 14px; }
.module-card .text-link { position: absolute; left: 34px; bottom: 28px; font-size: .82rem; font-weight: 700; border-bottom: 1px solid #85877f; }

.dark-section { background: var(--navy); color: #fff; }
.dark-section .kicker { color: #d8bd6e; }
.dark-section .kicker::before { background: #d8bd6e; }
.dark-section .lead, .dark-section .small { color: #bfc7cc; }
.dark-section .btn-secondary { color: #fff; border-color: #67717c; }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #394451; border: 1px solid #394451; margin-top: 56px; }
.role-card { background: var(--navy); padding: 32px; min-height: 300px; }
.role-card .role-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #aab2b8; }
.role-card h3 { margin-top: 26px; color: #fff; }
.role-card p { margin-top: 14px; color: #bfc7cc; font-size: .9rem; }
.role-card ul { padding: 0; list-style: none; margin: 24px 0 0; display: grid; gap: 9px; font-size: .82rem; color: #d7dcdf; }
.role-card li::before { content: "—"; margin-right: 8px; color: #d2ad43; }

.product-story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.story-sticky { position: sticky; top: 120px; }
.story-sticky p { margin-top: 22px; }
.story-stack { display: grid; gap: 18px; }
.story-block { background: #fff; border: 1px solid var(--line); padding: 34px; border-radius: var(--radius-sm); }
.story-block .tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-deep); font-weight: 750; }
.story-block h3 { margin-top: 16px; }
.story-block p { margin-top: 12px; color: var(--muted); }
.story-block ul { margin: 18px 0 0; padding-left: 18px; color: #4f575b; font-size: .9rem; }

.screenshot-strip { background:#e7e4dc; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.screenshot-row { display:flex; gap:18px; padding:34px 20px; width:max-content; }
.phone-shot { width: 220px; height: 440px; object-fit: cover; object-position: top; border-radius: 18px; border: 1px solid #c9c6bd; background: #fff; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.price-card { background: #fff; padding: 36px; border-right: 1px solid var(--line); min-height: 420px; display:flex; flex-direction:column; }
.price-card:last-child { border-right:0; }
.price-card.featured { background: #e9e4d5; }
.plan { font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; font-weight:800; color:var(--gold-deep); }
.price { margin-top:26px; font-size:2.4rem; line-height:1; font-weight:720; letter-spacing:-.04em; }
.price small { font-size:.8rem; color:var(--muted); font-weight:500; letter-spacing:0; }
.price-card p { margin-top:16px; color:var(--muted); }
.price-card ul { list-style:none; padding:0; margin:28px 0; display:grid; gap:11px; font-size:.9rem; }
.price-card li::before { content:"✓"; margin-right:9px; color:var(--ok); font-weight:800; }
.price-card .btn { margin-top:auto; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width:100%; border:0; background:transparent; color:var(--ink); padding:24px 0; display:flex; justify-content:space-between; gap:24px; text-align:left; font-weight:700; }
.faq-q span:last-child { font-size:1.25rem; font-weight:400; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p { color:var(--muted); padding:0 0 26px; max-width:780px; }
.faq-item.open .faq-a { max-height:320px; }

.cta-band { background: var(--gold); color:#171712; }
.cta-grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; padding:70px 0; }
.cta-grid h2 { font-size:clamp(2.4rem,4vw,4.4rem); }
.cta-grid p { margin-top:16px; max-width:650px; color:#4f451f; }
.cta-grid .actions { margin-top:0; justify-content:flex-end; }
.cta-band .btn-primary { background:#171712; border-color:#171712; }
.cta-band .btn-secondary { border-color:#756522; }

.page-hero { padding: 84px 0 70px; border-bottom: 1px solid var(--line); }
.page-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:end; }
.page-hero h1 { font-size:clamp(3.25rem,6vw,6rem); }
.page-hero .lead { margin-top:24px; }
.page-aside { border-left:1px solid var(--line); padding-left:34px; }
.page-aside dl { margin:0; display:grid; gap:20px; }
.page-aside dt { font-size:.72rem; color:#8d8e89; text-transform:uppercase; letter-spacing:.12em; }
.page-aside dd { margin:4px 0 0; font-size:.95rem; font-weight:650; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.content-copy h2 { font-size:clamp(2.2rem,4vw,4rem); }
.content-copy p { color:var(--muted); margin-top:20px; }
.content-copy ul { margin:24px 0 0; padding-left:20px; color:#454d51; display:grid; gap:10px; }

.capability-table { border-top:1px solid var(--line); }
.cap-row { display:grid; grid-template-columns:1fr 1.4fr; border-bottom:1px solid var(--line); }
.cap-row > div { padding:26px 0; }
.cap-row > div:first-child { font-weight:750; padding-right:40px; }
.cap-row > div:last-child { color:var(--muted); }

.demo-frame { border:1px solid var(--line); background:#fff; padding:18px; border-radius:14px; }
.demo-frame img { width:100%; border:1px solid #e5e3dc; }
.demo-note { margin-top:14px; color:var(--muted); font-size:.8rem; }

.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.resource-card { border:1px solid var(--line); background:#fff; padding:30px; min-height:300px; display:flex; flex-direction:column; }
.resource-card .meta { font-size:.72rem; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.1em; font-weight:750; }
.resource-card h3 { margin-top:28px; }
.resource-card p { margin-top:14px; color:var(--muted); font-size:.9rem; }
.resource-card a { margin-top:auto; padding-top:28px; font-size:.84rem; font-weight:750; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.contact-card { background:#fff; padding:42px; min-height:230px; }
.contact-card .label { font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; color:#898b86; }
.contact-card h3 { margin-top:18px; }
.contact-card p { margin-top:12px; color:var(--muted); }
.contact-card a.inline { display:inline-block; margin-top:18px; font-weight:750; border-bottom:1px solid currentColor; }

.footer { background:#111820; color:#e7ebed; padding:68px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:55px; }
.footer .brand-copy span { color:#939da4; }
.footer-copy { margin-top:24px; color:#99a3aa; max-width:390px; font-size:.9rem; }
.footer h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:#aab3b9; margin-bottom:20px; }
.footer-links { display:grid; gap:10px; color:#d2d8dc; font-size:.9rem; }
.footer-links a:hover { color:#fff; }
.footer-bottom { margin-top:55px; padding-top:22px; border-top:1px solid #303a43; display:flex; justify-content:space-between; gap:20px; color:#88939b; font-size:.78rem; }

.breadcrumbs { font-size:.8rem; color:var(--muted); margin-bottom:22px; }
.breadcrumbs a { border-bottom:1px solid #a7a8a3; }

@media (max-width: 1050px) {
  .nav-links { display:none; position:absolute; top:78px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:20px; flex-direction:column; align-items:stretch; gap:4px; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:11px 0; }
  .nav-links .nav-actions { flex-direction:column; margin-top:8px; }
  .menu-toggle { display:block; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 860px; }
  .product-window { max-width: 780px; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .trust-item { border-bottom:1px solid var(--line); }
  .module-grid { grid-template-columns:repeat(2,1fr); }
  .role-grid { grid-template-columns:repeat(2,1fr); }
  .page-hero-grid, .product-story { grid-template-columns:1fr; }
  .page-aside { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; }
  .story-sticky { position:static; }
  .pricing-grid { grid-template-columns:1fr; }
  .price-card { border-right:0; border-bottom:1px solid var(--line); }
  .price-card:last-child { border-bottom:0; }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column:2/4; }
}

@media (max-width: 760px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .section { padding:76px 0; }
  .section-tight { padding:56px 0; }
  .nav { height:70px; }
  .brand-copy span { display:none; }
  .announcement { display:none; }
  .hero { padding:60px 0 52px; }
  .hero h1, .page-hero h1 { font-size:clamp(3rem,15vw,4.5rem); }
  .hero-grid { gap:40px; }
  .app-shell { grid-template-columns:92px 1fr; min-height:420px; }
  .app-side { padding:16px 8px; }
  .app-logo { font-size:0; }
  .app-menu span { font-size:0; min-height:32px; }
  .app-menu span::after { content: attr(data-short); font-size:.58rem; }
  .app-main { padding:14px; }
  .metrics { grid-template-columns:1fr; }
  .metrics .metric:nth-child(n+3) { display:none; }
  .app-row { grid-template-columns:1fr; }
  .app-row .panel:last-child { display:none; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-item { border-right:0; }
  .section-head { display:block; margin-bottom:38px; }
  .section-head .lead { margin-top:20px; }
  .editorial-grid, .two-col { grid-template-columns:1fr; }
  .editorial-main { padding:38px 0; border-right:0; border-bottom:1px solid var(--line); }
  .editorial-side { padding:32px 0; }
  .module-grid, .role-grid, .resource-grid, .contact-grid { grid-template-columns:1fr; }
  .role-grid { background:#394451; }
  .cta-grid { grid-template-columns:1fr; }
  .cta-grid .actions { justify-content:flex-start; }
  .cap-row { grid-template-columns:1fr; padding:20px 0; }
  .cap-row > div { padding:4px 0; }
  .page-hero { padding:56px 0; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px 24px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

/* Self-contained product workflow visuals */
.workflow-showcase { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#e9e6de; padding:34px 0; }
.workflow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.workflow-card { background:#f8f7f3; border:1px solid #d6d2c8; padding:22px; min-height:280px; }
.workflow-top { display:flex; justify-content:space-between; gap:20px; align-items:center; font-size:.78rem; color:#787c7a; }
.workflow-top strong { color:var(--ink); font-size:.9rem; }
.workflow-ui { margin:24px 0 20px; min-height:118px; background:#fff; border:1px solid #dfddd6; padding:16px; }
.ui-line { display:block; height:7px; width:58%; background:#d9d8d2; margin-bottom:9px; }
.ui-line.long { width:88%; background:#bfc1bd; }
.ui-line.mid { width:72%; }
.ui-chip { display:inline-block; margin:15px 5px 0 0; padding:5px 8px; border:1px solid #d7d3c7; background:#f4f1e8; font-size:.64rem; color:#5d625f; }
.ui-stat { margin-top:15px; border-top:1px solid #ebe9e3; padding-top:12px; display:grid; gap:2px; }
.ui-stat b { font-size:.78rem; }
.ui-stat small { font-size:.62rem; color:#818784; }
.workflow-card p { font-size:.86rem; color:var(--muted); }

.finance-preview { border:1px solid #cfcac0; background:#f7f6f1; }
.finance-preview-head { min-height:46px; border-bottom:1px solid #dcd8cf; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:.73rem; color:#6f7574; background:#eceae3; }
.finance-preview-body { padding:18px; }
.finance-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.finance-summary > div { background:#fff; border:1px solid #e0ddd5; padding:14px; }
.finance-summary small { display:block; color:#888e8c; font-size:.62rem; }
.finance-summary strong { display:block; margin-top:4px; font-size:.82rem; }
.finance-table { margin-top:14px; background:#fff; border:1px solid #e0ddd5; }
.finance-row { display:grid; grid-template-columns:1.5fr .7fr .7fr; gap:10px; padding:12px 14px; border-bottom:1px solid #ece9e2; font-size:.69rem; color:#59615f; }
.finance-row:last-child { border-bottom:0; }
.finance-row.header { background:#f2f0e9; color:#7a807e; font-weight:700; }
.status-ok { color:#4f6a50; font-weight:700; }
.finance-note { margin-top:12px; color:#858a88; font-size:.68rem; }

@media (max-width:1050px) {
  .workflow-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .workflow-grid { grid-template-columns:1fr; }
  .finance-summary { grid-template-columns:1fr; }
}

/* 2026 brand-led visual refresh */
:root {
  --paper: #f7f8f2;
  --paper-2: #eef2e7;
  --surface: #ffffff;
  --ink: #17211b;
  --ink-2: #25342b;
  --muted: #647068;
  --line: #dbe2d8;
  --line-dark: #31513c;
  --gold: #f3d20a;
  --gold-deep: #947f00;
  --navy: #123c28;
  --navy-2: #0b2d1d;
  --ok: #237a3b;
  --max: 1240px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 24px 70px rgba(20, 48, 31, .14);
}

body { background: var(--paper); font-family: "Segoe UI", Arial, sans-serif; }
h1,h2,h3,h4 { letter-spacing: -.025em; font-weight: 720; }
h1 { font-size: clamp(2.9rem, 5vw, 5rem); }
h2 { font-size: clamp(2.1rem, 3.5vw, 3.65rem); }
.lead { color: #59665e; }
.section { padding: 92px 0; }
.kicker { color: #40624b; letter-spacing: .13em; }
.kicker::before { width: 18px; height: 3px; background: var(--gold); }

.announcement { background: var(--navy-2); color: #fff; border: 0; }
.announcement strong { color: var(--gold); }
.announcement span { color: #cbd7ce; }
.site-header { background: rgba(255,255,255,.96); border-bottom-color: #e4e9e1; box-shadow: 0 10px 35px rgba(17,48,30,.05); }
.nav { min-height: 84px; }
.brand { width: 196px; height: 62px; flex: 0 0 196px; background: url('/assets/images/sekani-logo-dark.png') center / contain no-repeat; }
.brand-mark,.brand-copy { visibility: hidden; }
.nav-links { color: #314038; gap: 20px; }
.nav-links > a { position: relative; }
.nav-links > a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:3px; background:var(--gold); transition:right .2s ease; }
.nav-links > a:hover::after,.nav-links > a[aria-current="page"]::after { right:0; }
.btn { border-radius: 8px; min-height: 50px; padding: 13px 21px; }
.btn-primary { background: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background: #1b5939; border-color: #1b5939; }
.nav-actions .btn-primary { background: var(--gold); color: #17211b; border-color: var(--gold); }
.nav-actions .btn-primary:hover { background: #e2c200; border-color: #e2c200; }

.hero { padding: 68px 0 82px; background: linear-gradient(110deg,#f8f9f4 0 51%,#e7eee5 51%); }
.hero-grid { grid-template-columns: minmax(0,.88fr) minmax(500px,1.12fr); gap: 64px; }
.hero h1 { font-size: clamp(2.8rem,4.15vw,4.35rem); line-height: 1.04; max-width: 640px; }
.hero h1 em { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: .13em; text-underline-offset: .08em; }
.hero-copy .lead { margin-top: 24px; font-size: clamp(1.06rem,1.4vw,1.22rem); }
.hero-note span::before { content:""; display:inline-block; width:7px; height:7px; margin:0 9px 1px 0; border-radius:50%; background:#3d8e50; }
.hero-visual { margin:0; position:relative; min-width:0; }
.hero-visual::before { content:""; position:absolute; width:112px; height:112px; right:-18px; top:-18px; background:var(--gold); z-index:0; }
.hero-visual img { position:relative; z-index:1; width:100%; height:auto; object-fit:cover; object-position:center; border-radius:4px; box-shadow:var(--shadow); }
.hero-visual figcaption { position:absolute; z-index:2; left:-24px; bottom:26px; max-width:360px; padding:18px 22px; background:var(--navy); color:#fff; box-shadow:0 16px 36px rgba(10,40,25,.2); }
.hero-visual figcaption strong,.hero-visual figcaption span { display:block; }
.hero-visual figcaption strong { font-size:1.05rem; }
.hero-visual figcaption span { margin-top:3px; color:#cbd9d0; font-size:.83rem; }
.hero .product-window { display:none; }

.trust-band { background:var(--navy); color:#fff; border:0; }
.trust-grid { background:transparent; gap:0; }
.trust-item { border-color:rgba(255,255,255,.14); padding:27px 24px; }
.trust-item span { color:#b9c9bf; }
.trust-item strong { color:#fff; }
.trust-item:first-child strong { color:var(--gold); }

.section-head { align-items:end; }
.module-grid { gap:18px; background:transparent; border:0; }
.module-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.module-card:hover { transform:translateY(-5px); border-color:#9eb5a5; box-shadow:0 22px 48px rgba(18,60,40,.09); }
.module-index { color:#688071; }
.module-card:nth-child(1),.module-card:nth-child(4) { border-top:4px solid var(--gold); }
.text-link,.inline { color:#185b35; }

.dark-section { background:var(--navy-2); }
.dark-section .kicker { color:var(--gold); }
.dark-section h2,.dark-section h3,.dark-section strong,.dark-section a { color:#fff; }
.dark-section p,.dark-section li,.dark-section .lead,.dark-section .small { color:#d4ded7; }
.role-grid { gap:16px; }
.role-card { background:#133b28; border:1px solid #31543f; border-radius:var(--radius); }
.role-card:hover { background:#174831; }
.role-label { color:var(--gold); }

.story-block { background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; }
.tag { color:#287044; }
.workflow-showcase { background:#e8eee5; }
.workflow-card { background:#fff; border-radius:var(--radius); border-color:#ced9d0; }
.workflow-top span { color:#6d7a71; }

.screenshot-section { background:#fff; }
.product-shot { margin:0; overflow:hidden; background:#f2f5ef; border:1px solid var(--line); border-radius:var(--radius); }
.product-shot > a { display:block; overflow:hidden; background:#eef1ee; border-bottom:1px solid var(--line); }
.product-shot img { display:block; width:100%; height:auto; transition:transform .3s ease; }
.product-shot > a:hover img { transform:scale(1.012); }
.product-shot figcaption { padding:26px 28px 30px; }
.product-shot figcaption span { color:#477057; font-size:.76rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.product-shot figcaption h3 { margin-top:10px; font-size:1.28rem; }
.product-shot figcaption p { margin-top:10px; color:var(--muted); font-size:.92rem; }
.product-shot-featured { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(270px,.62fr); align-items:stretch; margin-top:50px; border-top:5px solid var(--gold); box-shadow:0 24px 60px rgba(17,54,34,.12); }
.product-shot-featured > a { border:0; border-right:1px solid var(--line); }
.product-shot-featured img { height:100%; object-fit:cover; }
.product-shot-featured figcaption { display:flex; flex-direction:column; justify-content:center; padding:38px 82px 38px 38px; background:var(--navy); color:#fff; }
.product-shot-featured figcaption span { color:var(--gold); }
.product-shot-featured figcaption h3 { color:#fff; font-size:1.55rem; }
.product-shot-featured figcaption p { color:#d4ded7; }
.product-shot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; }

.page-hero { background:linear-gradient(120deg,#f7f8f2 0 68%,#e9efe7 68%); padding:64px 0 58px; overflow:hidden; }
.page-hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:42px 58px; align-items:center; }
.page-hero-grid > div:first-child { grid-column:1; grid-row:1; }
.page-hero h1 { font-size:clamp(2.55rem,4vw,4.1rem); line-height:1.04; }
.page-hero-media { grid-column:2; grid-row:1; position:relative; width:100%; margin:0; }
.page-hero-media::before { content:""; position:absolute; z-index:0; width:84px; height:84px; right:-14px; top:-14px; background:var(--gold); }
.page-hero-media img { position:relative; z-index:1; display:block; width:100%; height:auto; object-fit:cover; object-position:center; border-radius:4px; box-shadow:0 22px 55px rgba(18,60,40,.16); }
.page-aside { grid-column:1/-1; grid-row:2; background:var(--navy); color:#fff; border:0; border-top:5px solid var(--gold); border-radius:var(--radius); padding:22px 26px; }
.page-aside dl { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.page-aside dt { color:#aec0b5; }
.page-aside dd { color:#fff; }
.page-aside a { color:#fff; text-decoration-color:var(--gold); }
.editorial-grid { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.editorial-main { background:var(--navy); padding:46px 50px; }
.editorial-main h3 { color:#fff; }
.editorial-main p { color:#c5d2ca; }
.editorial-main .btn-primary { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.editorial-main .btn-primary:hover { background:#e2c200; border-color:#e2c200; color:var(--ink); }
.editorial-side { background:#f0f4ec; padding:46px 50px; }
.cta-band { background:var(--gold); color:var(--ink); }
.cta-band p { color:#4c4b26; }
.cta-band .btn-primary { background:var(--navy); border-color:var(--navy); }
.footer { background:#071f14; }
.footer .brand { background-image:url('/assets/images/sekani-logo-white.webp'); }
.footer-copy,.footer-bottom { color:#b8c7be; }
.footer h4 { color:#d7e0da; }
.footer-links { color:#e1e8e3; }
.footer-links a:hover { color:var(--gold); }

.resource-card { padding:0; min-height:410px; overflow:hidden; border-radius:var(--radius); transition:transform .2s ease,box-shadow .2s ease; }
.resource-card:hover { transform:translateY(-4px); box-shadow:0 20px 45px rgba(18,60,40,.1); }
.resource-card-media { display:block; aspect-ratio:3/2; overflow:hidden; background:#dfe8df; }
.resource-card-media img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s ease; }
.resource-card:hover .resource-card-media img { transform:scale(1.025); }
.resource-card-body { padding:26px 28px 30px; display:flex; flex:1; flex-direction:column; }
.resource-card h3 { margin-top:18px; }
.article-byline { margin-top:18px; color:#526259; font-size:.82rem; font-weight:650; }

.social-dock { position:fixed; z-index:45; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; padding:7px; background:#082719; border:1px solid rgba(255,255,255,.18); border-radius:999px; box-shadow:0 14px 38px rgba(5,34,20,.25); }
.social-link { width:42px; height:42px; display:grid; place-items:center; color:#fff; border-radius:50%; transition:background .18s ease,color .18s ease,transform .18s ease; }
.social-link:hover,.social-link:focus-visible { background:var(--gold); color:#14271b; transform:scale(1.06); }
.social-link svg { width:20px; height:20px; fill:currentColor; }
.social-link.is-pending { color:#98ada0; cursor:default; }

.page-loader { position:fixed; z-index:200; inset:0; display:grid; place-items:center; background:rgba(7,31,20,.88); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease,visibility .16s ease; }
.is-leaving .page-loader { opacity:1; visibility:visible; }
.loader-mark { width:56px; height:56px; border:5px solid rgba(255,255,255,.25); border-top-color:var(--gold); border-radius:50%; animation:sekani-spin .7s linear infinite; }
@keyframes sekani-spin { to { transform:rotate(360deg); } }

@media (max-width:1050px) {
  body.nav-open { overflow:hidden; }
  body.nav-open::after { content:""; position:fixed; z-index:39; inset:0; background:rgba(6,31,19,.55); }
  .site-header { z-index:50; }
  .nav-links { top:84px; left:16px; right:16px; padding:18px; gap:4px; border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow:0 24px 50px rgba(8,39,25,.18); }
  .nav-links a:not(.btn) { padding:14px 12px; border-bottom:1px solid #e5ebe5; font-size:1rem; }
  .nav-links a[aria-current="page"] { background:#eef4ed; color:#0b4528; border-radius:8px; }
  .nav-links .nav-actions { gap:10px; }
  .nav-links .btn { width:100%; }
  .menu-toggle { position:relative; font-size:0; border-color:#b8c9bc; background:#fff; }
  .menu-toggle::before,.menu-toggle::after,.menu-toggle { background-repeat:no-repeat; }
  .menu-toggle::before { content:""; position:absolute; left:11px; right:11px; top:14px; height:2px; background:#173c28; box-shadow:0 7px 0 #173c28,0 14px 0 #173c28; transition:transform .2s ease,box-shadow .2s ease,top .2s ease; }
  .nav-open .menu-toggle::before { top:21px; transform:rotate(45deg); box-shadow:none; }
  .nav-open .menu-toggle::after { content:""; position:absolute; left:11px; right:11px; top:21px; height:2px; background:#173c28; transform:rotate(-45deg); }
  .hero { background:#f7f8f2; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:760px; }
  .hero-visual { max-width:820px; }
  .product-shot-featured { grid-template-columns:1fr; }
  .product-shot-featured > a { border-right:0; border-bottom:1px solid var(--line); }
  .page-hero-grid { grid-template-columns:minmax(0,1fr) minmax(310px,.8fr); gap:34px; }
  .page-aside dl { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .container { width:min(calc(100% - 30px),var(--max)); }
  .section { padding:68px 0; }
  .nav { min-height:72px; }
  .brand { width:160px; height:50px; flex-basis:160px; }
  .nav-links { top:72px; background:#fff; max-height:calc(100vh - 88px); overflow-y:auto; }
  .nav-links > a::after { display:none; }
  .hero { padding:48px 0 58px; }
  .hero h1,.page-hero h1 { font-size:clamp(2.35rem,10.5vw,3.3rem); }
  .hero-visual::before { width:70px; height:70px; right:-8px; top:-8px; }
  .hero-visual figcaption { left:12px; right:12px; bottom:12px; max-width:none; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-item:first-child { grid-column:1/-1; }
  .product-shot-grid { grid-template-columns:1fr; gap:18px; }
  .product-shot-featured { margin-top:34px; }
  .product-shot-featured figcaption,.product-shot figcaption { padding:24px; }
  .editorial-main,.editorial-side { padding:30px 26px; }
  .page-hero { background:#f7f8f2; }
  .page-hero-grid { display:grid; grid-template-columns:1fr; gap:30px; }
  .page-hero-grid > div:first-child,.page-hero-media,.page-aside { grid-column:1; grid-row:auto; }
  .page-hero-grid > div:first-child { order:1; }
  .page-hero-media { order:2; }
  .page-aside { order:3; }
  .page-hero-media { margin-top:6px; }
  .page-hero-media::before { width:64px; height:64px; right:-8px; top:-8px; }
  .page-hero h1 { font-size:clamp(2.2rem,9vw,2.8rem); }
  .page-hero-media img { height:auto; }
  .page-aside { padding:20px; }
  .page-aside dl { grid-template-columns:1fr; gap:16px; }
  .resource-grid { grid-template-columns:1fr; }
  .social-dock { top:auto; right:50%; bottom:12px; transform:translateX(50%); flex-direction:row; }
  .social-link { width:40px; height:40px; }
  .footer { padding-bottom:92px; }
}

@media (prefers-reduced-motion:reduce) {
  .loader-mark { animation-duration:1.5s; }
  .resource-card,.resource-card-media img,.social-link { transition:none; }
}

/* Mobile attendance and long-form resource content */
.attendance-screen-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:46px; align-items:start; }
.attendance-shot { margin:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 42px rgba(18,60,40,.08); }
.attendance-shot img { display:block; width:100%; height:auto; aspect-ratio:561/1280; object-fit:cover; object-position:top; background:#eef1ee; }
.attendance-shot figcaption { display:flex; flex-direction:column; gap:7px; padding:20px; }
.attendance-shot figcaption strong { color:var(--ink); }
.attendance-shot figcaption span { color:var(--muted); font-size:.88rem; line-height:1.55; }
.section-soft { background:#edf2e9; }
.faq-list { max-width:900px; margin-top:40px; border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); background:#fff; }
.faq-list summary { cursor:pointer; padding:22px 26px; color:var(--ink); font-weight:720; }
.faq-list details p { max-width:760px; padding:0 26px 24px; color:var(--muted); }
.article-product-figure { max-width:330px; margin:34px 0 0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.article-product-figure img { display:block; width:100%; height:auto; }
.article-product-figure figcaption { padding:14px 16px; color:var(--muted); font-size:.82rem; }
.attendance-feature-band { background:var(--navy); color:#fff; }
.attendance-feature-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:54px; align-items:center; }
.attendance-feature-band h2 { color:#fff; }
.attendance-feature-band .lead { color:#d4ded7; }
.attendance-feature-media { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(130px,.65fr); gap:16px; align-items:center; }
.attendance-feature-media img { display:block; width:100%; height:auto; border-radius:var(--radius-sm); }
.attendance-feature-media img:first-child { box-shadow:0 24px 60px rgba(0,0,0,.24); }
@media (max-width:1050px) {
  .attendance-screen-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .attendance-feature-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .attendance-screen-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .attendance-shot figcaption { padding:14px; }
  .attendance-feature-media { grid-template-columns:1fr 140px; gap:10px; }
}