:root {

  color-scheme: light;

  --bg: #fbfbfa;

  --surface: #ffffff;

  --surface-2: #f6f6f3;

  --surface-3: #ecece7;

  --ink: #121212;

  --muted: #6d6d67;

  --line: #dfe7df;

  --nav: #0f0f0f;

  --nav-2: #191919;

  --accent: #16a34a;

  --accent-soft: #dcfce7;

  --teal: #0f0f0f;

  --teal-soft: #dcfce7;

  --blue: #0f0f0f;

  --blue-soft: #dcfce7;

  --red: #3a3a3a;

  --red-soft: #f5f5f5;

  --green: #15803d;

  --green-soft: #dcfce7;

  --violet: #0f0f0f;

  --violet-soft: #dcfce7;

  --shadow: 0 14px 40px rgba(15, 15, 15, .06);

  font-family: Aptos, Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif;

}



* { box-sizing: border-box; }

html { min-width: 320px; }

body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); font-size: 14px; letter-spacing: 0; }

a { color: inherit; text-decoration: none; }

button, input, select { font: inherit; }

button { cursor: pointer; }

strong { font-weight: 500; }



.landing-body { min-height: 100vh; color: #101415; background: #f6f7f1; font-family: Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; }

.landing-body main { padding: 0; }

.landing-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; min-height: 74px; margin-bottom: 0; padding: 14px clamp(18px, 5vw, 64px); color: #f7f8f3; background: #101415; border-bottom: 1px solid rgba(255,255,255,.1); }

.landing-logo { color: #ffffff; font-size: 22px; line-height: 1; font-weight: 700; }

.landing-menu { display: flex; justify-content: center; gap: 24px; }

.landing-menu a { color: rgba(247,248,243,.72); font-size: 13px; font-weight: 600; }

.landing-menu a:hover { color: #ffffff; }

.landing-nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.landing-link { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #ffffff; font-size: 13px; font-weight: 600; }



.landing-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); gap: clamp(26px, 5vw, 72px); align-items: center; min-height: 660px; padding: 58px clamp(18px, 5vw, 64px) 46px; background: #f6f7f1; }

.hero-content { max-width: 610px; }

.landing-hero .eyebrow { color: #138a5d; }

.landing-hero h1 { max-width: 620px; margin: 0; color: #101415; font-size: clamp(42px, 5.7vw, 74px); line-height: 1; font-weight: 750; }

.landing-copy { max-width: 560px; margin: 22px 0 0; color: #465150; font-size: 18px; line-height: 1.56; }

.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.landing-actions .btn.secondary { color: #101415; background: #ffffff; border-color: #cdd5cf; }

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 500px; margin-top: 30px; }

.hero-stats div { min-height: 78px; padding: 14px; border: 1px solid #dde4dc; border-radius: 8px; background: #ffffff; }

.hero-stats strong { display: block; color: #101415; font-size: 24px; line-height: 1; font-weight: 750; }

.hero-stats span { display: block; margin-top: 8px; color: #66716d; font-size: 12px; text-transform: uppercase; }



.hero-media { position: relative; min-height: 570px; }

.product-window { position: relative; width: 100%; min-height: 496px; padding: 16px; border: 1px solid #d7ded6; border-radius: 8px; color: #151d19; background: #ffffff; box-shadow: 0 24px 70px rgba(32, 42, 38, .12); }

.window-top { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; color: #68726f; font-size: 12px; }

.window-top b { width: 10px; height: 10px; border-radius: 50%; background: #d9dfd9; }

.window-top strong { margin-left: 10px; color: #46524e; font-size: 12px; font-weight: 700; }

.window-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.window-metric, .window-table { padding: 15px; border: 1px solid #dfe6df; border-radius: 8px; background: #fbfcf8; }

.window-metric { min-height: 122px; }

.window-metric.dark { color: #ffffff; background: #101415; border-color: #101415; }

.window-metric.accent { background: #eaf8f0; border-color: #b9dfc8; }

.window-metric span, .window-metric small, .landing-next span, .landing-next small, .auth-ledger span { display: block; color: #66716d; font-size: 11px; text-transform: uppercase; }

.window-metric.dark span, .window-metric.dark small { color: #c4cbc8; }

.window-metric strong { display: block; margin: 14px 0 8px; font-size: 24px; line-height: 1; font-weight: 750; }

.window-table { grid-column: 1 / -1; display: grid; min-height: 212px; }

.window-table div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid #e4e9e4; }

.window-table div:first-child { border-top: 0; }

.window-table span { color: #65716c; }

.window-table em { min-width: 88px; padding: 6px 9px; border: 1px solid #dbe3db; border-radius: 999px; background: #ffffff; font-size: 12px; font-style: normal; text-align: center; }

.phone-preview { position: absolute; right: 26px; bottom: 0; display: grid; align-content: end; width: 160px; min-height: 292px; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; color: #ffffff; background: #101415; box-shadow: 0 18px 50px rgba(16, 20, 21, .25); }

.phone-preview span { width: 42px; height: 5px; margin: 0 auto auto; border-radius: 999px; background: #394240; }

.phone-preview strong { color: #16a34a; font-size: 21px; line-height: 1.1; }

.phone-preview small { margin-top: 8px; color: #d3dbd7; }



.landing-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; color: #101415; background: #dfe5df; border-top: 1px solid #dfe5df; border-bottom: 1px solid #dfe5df; }

.landing-next div { min-height: 102px; padding: 20px clamp(18px, 4vw, 44px); background: #ffffff; }

.landing-next strong { display: block; margin: 6px 0 5px; font-size: 18px; font-weight: 750; }

.landing-section, .platform-band, .proof-section, .final-cta { background: #f6f7f1; color: #101415; }

.landing-section { padding: 74px clamp(18px, 5vw, 64px); }

.section-copy { max-width: 760px; margin-bottom: 28px; }

.section-copy h2, .platform-copy h2, .final-cta h2 { margin-bottom: 12px; font-size: clamp(30px, 4.3vw, 54px); line-height: 1.04; font-weight: 750; }

.section-copy p, .platform-copy p { max-width: 640px; color: #56625e; font-size: 16px; }

.solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.solution-grid article { min-height: 220px; padding: 20px; border: 1px solid #dfe5df; border-radius: 8px; background: #ffffff; }

.solution-grid article:nth-child(2) { background: #f2f9fb; border-color: #d2e7ec; }

.solution-grid article:nth-child(3) { background: #ecfdf5; border-color: #86efac; }

.solution-grid article:nth-child(4) { background: #edf8f1; border-color: #c8e7d3; }

.solution-grid span { color: #138a5d; font-size: 12px; font-weight: 750; }

.solution-grid h3 { margin: 30px 0 10px; font-size: 20px; line-height: 1.18; font-weight: 750; }

.solution-grid p { margin: 0; color: #59635f; font-size: 14px; }

.brand-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0 clamp(18px, 5vw, 64px) 74px; color: #101415; background: #f6f7f1; }

.brand-strip span { min-height: 70px; display: grid; place-items: center; border: 1px solid #dfe5df; border-radius: 8px; background: #ffffff; color: #56625e; font-weight: 750; text-align: center; }

.platform-band { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 34px; align-items: center; padding: 74px clamp(18px, 5vw, 64px); background: #101415; color: #ffffff; }

.platform-band .eyebrow, .final-cta .eyebrow { color: #86dbaa; }

.platform-copy p { color: #c9d3cf; }

.platform-copy .btn { margin-top: 10px; }

.platform-rows { display: grid; gap: 10px; }

.platform-rows div { display: grid; grid-template-columns: minmax(170px, .72fr) 1fr; gap: 16px; align-items: center; min-height: 74px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.05); }

.platform-rows strong { color: #ffffff; font-size: 16px; font-weight: 750; }

.platform-rows span { color: #a9dbc0; font-size: 13px; overflow-wrap: anywhere; }

.proof-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 18px; padding: 74px clamp(18px, 5vw, 64px); }

.proof-card { padding: clamp(24px, 4vw, 42px); border: 1px solid #dfe5df; border-radius: 8px; background: #ffffff; }

.proof-card p { max-width: 850px; margin-bottom: 24px; color: #101415; font-size: clamp(23px, 3.2vw, 38px); line-height: 1.16; }

.proof-card strong { font-size: 15px; }

.proof-metrics { display: grid; gap: 12px; }

.proof-metrics div { display: grid; align-content: center; min-height: 122px; padding: 18px; border-radius: 8px; background: #edf8f1; border: 1px solid #c8e7d3; }

.proof-metrics div:nth-child(2) { background: #ecfdf5; border-color: #86efac; }

.proof-metrics div:nth-child(3) { background: #f2f9fb; border-color: #d2e7ec; }

.proof-metrics span { font-size: 32px; line-height: 1; font-weight: 750; }

.proof-metrics small { margin-top: 8px; color: #56625e; text-transform: uppercase; }

.final-cta { display: grid; justify-items: center; gap: 12px; padding: 78px clamp(18px, 5vw, 64px) 88px; text-align: center; background: #101415; color: #ffffff; }

.final-cta h2 { max-width: 780px; color: #ffffff; }



/* Simple landing reset inspired by the direct VOLO layout. */

.landing-body { color: #131313; background: #ffffff; font-family: Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; }

.landing-body { overflow-x: hidden; }

.landing-body main { padding: 0; }

.landing-nav { min-height: 72px; padding: 14px clamp(18px, 5vw, 64px); background: #0f1110; }

.landing-logo { font-size: 21px; font-weight: 700; letter-spacing: 0; }

.landing-menu { gap: 26px; }

.landing-menu a, .landing-link { font-size: 13px; font-weight: 600; }

.landing-hero { grid-template-columns: minmax(0, .92fr) minmax(420px, .88fr); gap: clamp(28px, 6vw, 80px); min-height: 520px; padding: 58px clamp(18px, 5vw, 64px) 48px; background: #ffffff; overflow: hidden; }

.hero-content { max-width: 560px; }

.landing-hero .eyebrow { color: #16744f; }

.landing-hero h1 { max-width: 520px; font-size: clamp(34px, 4vw, 50px); line-height: 1.06; font-weight: 700; letter-spacing: 0; }

.landing-copy { max-width: 500px; margin-top: 18px; color: #4b4f4d; font-size: 16px; line-height: 1.6; }

.landing-actions { margin-top: 26px; gap: 10px; }

.landing-actions .btn.secondary { color: #131313; background: transparent; border-color: #cfd4ce; }

.hero-media { min-height: 0; }

.dashboard-preview { max-width: 560px; margin-left: auto; padding: 18px; border: 1px solid #d8ddd6; border-radius: 8px; background: #ffffff; box-shadow: 0 16px 50px rgba(24, 32, 28, .08); }

.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #e6ebe5; }

.preview-head span, .preview-stats span, .preview-note, .landing-next span { color: #68706b; font-size: 11px; font-weight: 600; text-transform: uppercase; }

.preview-head strong { font-size: 13px; font-weight: 700; }

.preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 0; }

.preview-stats div { min-height: 86px; padding: 13px; border: 1px solid #e1e7e0; border-radius: 8px; background: #fafbf7; }

.preview-stats strong { display: block; margin-top: 12px; font-size: 20px; line-height: 1; font-weight: 700; }

.preview-list { display: grid; border: 1px solid #e1e7e0; border-radius: 8px; overflow: hidden; }

.preview-list div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; min-height: 58px; padding: 12px 14px; border-top: 1px solid #e8ede7; }

.preview-list div:first-child { border-top: 0; }

.preview-list span { color: #68706b; }

.preview-list em { min-width: 80px; padding: 5px 8px; border: 1px solid #d9dfd8; border-radius: 999px; font-size: 12px; font-style: normal; text-align: center; }

.preview-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

.preview-note span { width: 8px; height: 8px; border-radius: 50%; background: #16744f; }

.landing-next { grid-template-columns: repeat(3, minmax(0, 1fr)); background: #e1e5df; }

.landing-next div { min-height: 104px; padding: 20px clamp(18px, 4vw, 44px); background: #ffffff; }

.landing-next strong { margin: 7px 0 5px; font-size: 18px; font-weight: 700; }

.landing-next small { color: #616964; text-transform: none; }

.landing-section, .how-section, .platform-band, .final-cta { padding: 72px clamp(18px, 5vw, 64px); }

.landing-section, .how-section { background: #ffffff; color: #131313; }

.section-copy { max-width: 700px; }

.section-copy h2, .how-section h2, .platform-copy h2, .final-cta h2 { max-width: 720px; font-size: clamp(28px, 3.7vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: 0; }

.section-copy p, .how-section p, .platform-copy p { max-width: 600px; color: #59605c; font-size: 15px; line-height: 1.55; }

.solution-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.solution-grid article { min-height: 206px; padding: 18px; background: #ffffff; }

.solution-grid span { color: #16744f; font-size: 12px; font-weight: 700; }

.solution-grid h3 { margin: 28px 0 10px; font-size: 19px; line-height: 1.18; font-weight: 700; }

.solution-grid p { color: #5b625e; font-size: 14px; line-height: 1.5; }

.how-section { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 36px; border-top: 1px solid #e0e5df; }

.how-steps { display: grid; gap: 10px; }

.how-steps article { display: grid; grid-template-columns: 42px 1fr; gap: 8px 16px; padding: 18px; border: 1px solid #dfe5df; border-radius: 8px; background: #ffffff; }

.how-steps span { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #ffffff; background: #0f1110; font-weight: 700; }

.how-steps strong { font-size: 17px; font-weight: 700; }

.how-steps p { margin: 0; font-size: 14px; }

.platform-band { grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); background: #ffffff; color: #131313; border-top: 1px solid #e4e8e3; }

.platform-band .eyebrow, .final-cta .eyebrow { color: #16744f; }

.platform-copy p { color: #59605c; }

.platform-rows div { border-color: #dfe5df; background: #ffffff; }

.platform-rows strong { color: #131313; }

.platform-rows span { color: #59605c; }

.platform-rows div { min-height: 68px; }

.proof-section[hidden] { display: none !important; }

.final-cta { padding-top: 64px; padding-bottom: 74px; background: #ffffff; color: #131313; border-top: 1px solid #e4e8e3; }

.final-cta h2 { font-size: clamp(28px, 3.4vw, 42px); color: #131313; }

.landing-footer { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 28px; align-items: start; padding: 34px clamp(18px, 5vw, 64px); border-top: 1px solid #e4e8e3; color: #131313; background: #ffffff; }

.footer-logo { display: inline-block; margin-bottom: 10px; color: #131313; }

.landing-footer p { max-width: 420px; margin: 0; color: #59605c; font-size: 14px; line-height: 1.5; }

.footer-links { display: grid; gap: 8px; min-width: 130px; }

.footer-links a { color: #313735; font-size: 13px; font-weight: 600; }

.footer-meta { display: grid; gap: 8px; color: #68706b; font-size: 12px; text-align: right; text-transform: uppercase; }



.auth-body { min-height: 100vh; color: #111111; background: #0f0f0f; font-family: Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; }

.auth-stage { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; padding: clamp(20px, 4vw, 56px) clamp(18px, 5vw, 68px); overflow: hidden; background: #ffffff; }

.auth-stage::before { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(15,15,15,0), rgba(22,163,74,.12)); pointer-events: none; }

.auth-nav { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; }

.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: #111111; font-size: 20px; line-height: 1; font-weight: 800; }

.auth-mark { width: 24px; height: 24px; flex: 0 0 24px; background: radial-gradient(circle at 5px 5px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 13px 5px, #111111 0 3px, transparent 3.7px), radial-gradient(circle at 21px 5px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 5px 13px, #111111 0 3px, transparent 3.7px), radial-gradient(circle at 13px 13px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 21px 13px, #111111 0 3px, transparent 3.7px), radial-gradient(circle at 5px 21px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 13px 21px, #111111 0 3px, transparent 3.7px), radial-gradient(circle at 21px 21px, #16a34a 0 3px, transparent 3.7px); }

.auth-links { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }

.auth-links a { color: #111111; font-size: 12px; font-weight: 700; }

.auth-demo { min-height: 38px; display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 8px; background: #16a34a; border: 1px solid #15803d; }

.auth-scene { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(340px, 420px) minmax(190px, 1fr); gap: clamp(18px, 4vw, 48px); align-items: center; min-width: 0; min-height: 620px; }

.auth-panel { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 420px; min-width: 0; margin: 0 auto; padding: 0; background: transparent; }

.auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; min-width: 0; padding: 34px 36px 28px; border: 1px solid rgba(17,17,17,.04); border-radius: 28px; background: #ffffff; box-shadow: 0 28px 70px rgba(17,17,17,.12); }

.auth-form > div:first-child { text-align: center; }

.auth-form .eyebrow { margin-bottom: 8px; color: #166534; font-size: 11px; font-weight: 800; }

.auth-form h1 { margin: 0; color: #111111; font-size: 25px; line-height: 1.16; font-weight: 800; letter-spacing: 0; }

.auth-form p { margin: 9px 0 0; color: #555555; font-size: 13px; line-height: 1.45; }

.auth-form label { display: grid; gap: 8px; min-width: 0; color: #333333; font-size: 12px; font-weight: 700; }

.auth-form input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #dbe7dd; border-radius: 7px; padding: 10px 12px; color: #111111; background: #ffffff; font-size: 13px; }

.auth-form input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.22); }

.auth-help { width: fit-content; color: #111111; font-size: 12px; font-weight: 700; }

.auth-submit { width: 100%; min-height: 44px; margin-top: 2px; color: #111111; background: #16a34a; border-color: #16a34a; border-radius: 7px; font-size: 13px; font-weight: 800; box-shadow: none; }

.auth-submit:hover { background: #15803d; border-color: #15803d; }

.auth-error { padding: 11px 12px; border: 1px solid #111111; border-radius: 8px; color: #ffffff; background: #111111; font-size: 13px; }

.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; color: #777777; font-size: 11px; }

.auth-divider span { height: 1px; background: #dbe7dd; }

.auth-divider strong { font-weight: 700; }

.auth-access { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.auth-access span { display: grid; place-items: center; min-height: 38px; border: 1px solid #dbe7dd; border-radius: 8px; color: #111111; background: #f0fdf4; font-size: 11px; font-weight: 800; }

.auth-hint { margin: 0; color: #56625e; font-size: 11px; line-height: 1.45; text-align: center; }

.auth-note { display: flex; justify-content: center; gap: 8px; color: #56625e; font-size: 12px; }

.auth-note strong { color: #111111; font-weight: 800; }

.auth-side { position: relative; min-height: 430px; }

.auth-cardlet { position: absolute; left: 22%; top: 34%; width: 96px; height: 72px; border: 1px solid #111111; background: rgba(255,255,255,.52); }

.auth-cardlet span { position: absolute; left: 18px; right: 18px; height: 1px; background: #111111; }

.auth-cardlet span:first-child { top: 27px; }

.auth-cardlet span:nth-child(2) { top: 40px; }

.auth-cardlet.graph { left: 54%; top: 64%; width: 68px; height: 86px; background: #ffffff; }

.auth-cardlet.graph span { left: 30px; top: 24px; width: 22px; height: 22px; border-top: 1px solid #111111; border-right: 1px solid #111111; background: transparent; transform: rotate(-10deg); }

.auth-dots { position: absolute; left: 18%; top: 66%; width: 92px; height: 104px; background-color: #16a34a; background-image: radial-gradient(#111111 0 3px, transparent 3.5px); background-size: 22px 22px; }

.auth-dots.small { left: auto; right: 18%; top: 66%; width: 86px; height: 108px; }

.auth-squiggle { position: absolute; left: 18%; top: 22%; width: 150px; height: 45px; border-bottom: 1.5px solid #111111; border-radius: 50%; transform: rotate(-8deg); opacity: .68; }

.auth-squiggle::after { content: ""; position: absolute; left: 42px; top: 9px; width: 110px; height: 33px; border-top: 1.5px solid #111111; border-radius: 50%; }

.auth-squiggle.second { left: auto; right: 13%; top: 26%; transform: rotate(8deg); }

.auth-device-card { position: absolute; right: 38%; top: 35%; width: 80px; height: 64px; border: 1px solid #111111; background: rgba(255,255,255,.6); }

.auth-device-card span { position: absolute; left: 18px; right: 18px; top: 21px; height: 1px; background: #111111; box-shadow: 0 12px 0 #111111; }

.auth-device-card strong { position: absolute; right: -18px; bottom: -14px; min-height: 28px; display: grid; place-items: center; padding: 4px 10px; border-radius: 999px; color: #111111; background: #16a34a; font-size: 11px; font-weight: 800; }

.auth-operator { position: absolute; right: 24%; top: 42%; width: 160px; height: 220px; }

.auth-operator .head { position: absolute; right: 50px; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: #111111; }

.auth-operator .body { position: absolute; right: 45px; top: 42px; width: 64px; height: 92px; border-radius: 32px 32px 8px 8px; background: #111111; transform: rotate(-14deg); }

.auth-operator .screen { position: absolute; left: 8px; top: 56px; width: 86px; height: 54px; border: 2px solid #16a34a; border-radius: 6px; background: #f0fdf4; transform: rotate(-14deg); }

.auth-operator::before { content: ""; position: absolute; right: 16px; bottom: 0; width: 98px; height: 130px; border: 1px solid #111111; background: #ffffff; z-index: -1; }

.auth-operator::after { content: ""; position: absolute; right: 56px; top: 126px; width: 76px; height: 76px; border-left: 13px solid #111111; border-bottom: 13px solid #111111; transform: rotate(-18deg); }

.auth-footer { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; align-items: center; color: #4f4a41; font-size: 12px; }

.auth-footer span { width: 1px; height: 12px; background: #b9afa0; }



.intake-body { min-height: 100vh; color: #111111; background: #ffffff; font-family: Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; }

.intake-stage { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; padding: clamp(20px, 4vw, 52px) clamp(18px, 5vw, 68px); background: #ffffff; }

.intake-nav { padding: 0; }

.intake-panel { align-self: center; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 460px); gap: clamp(28px, 6vw, 86px); align-items: start; max-width: 1080px; width: 100%; margin: 0 auto; }

.intake-copy h1 { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; font-weight: 700; letter-spacing: 0; }

.intake-copy p:not(.eyebrow) { max-width: 430px; color: #555555; font-size: 15px; line-height: 1.55; }

.intake-form { grid-template-columns: 1fr; gap: 12px; width: 100%; padding: 24px; border: 1px solid #dfe7df; border-radius: 8px; background: #ffffff; }

.intake-form .btn { width: 100%; min-height: 44px; }

.intake-success { padding: 11px 12px; border: 1px solid #16a34a; border-radius: 8px; color: #111111; background: #dcfce7; font-size: 13px; }



.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

aside { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px; padding: 26px 16px 18px; color: #ffffff; background: var(--nav); border-right: 1px solid #0a0a0a; }

.brand { display: grid; gap: 7px; padding: 4px 8px 20px; border-bottom: 1px solid rgba(255,255,255,.14); }

.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }

.brand-logo { position: relative; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid rgba(22,163,74,.62); border-radius: 7px; }

.brand-logo::before { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 8px 0 #ffffff, 16px 0 var(--accent), 0 8px #ffffff, 8px 8px var(--accent), 16px 8px #ffffff, 0 16px var(--accent), 8px 16px #ffffff, 16px 16px var(--accent); }

.brand-word { color: #ffffff; font-size: 19px; line-height: 1; font-weight: 700; }

.brand span { color: #bdbdb8; font-size: 12px; line-height: 1.35; }

nav { display: grid; gap: 5px; }

nav button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; border: 0; border-radius: 8px; padding: 8px 10px 8px 12px; color: #c9c9c6; background: transparent; text-align: left; font-size: 13px; font-weight: 400; }

nav button::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 999px; background: transparent; }

nav button.active, nav button:hover { color: #ffffff; background: rgba(255,255,255,.07); }

nav button.active::before, nav button:hover::before { background: var(--accent); }

.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

nav button.active .nav-icon, nav button:hover .nav-icon { color: var(--accent); opacity: 1; }

.side-status { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; margin-top: auto; padding: 14px 8px 4px; border-top: 1px solid rgba(255,255,255,.14); background: transparent; }

.side-status strong, .side-status small { display: block; }

.side-status strong { font-size: 12px; }

.side-status small { margin-top: 3px; color: #bdbdb8; font-size: 11px; }

.pulse { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(22,163,74,.18); }



main { min-width: 0; padding: 24px 28px 34px; }

header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; }

h1, h2, h3, p { margin-top: 0; }

h1 { margin-bottom: 0; font-size: 22px; line-height: 1.12; font-weight: 700; }

h2 { margin-bottom: 4px; font-size: 14px; line-height: 1.25; font-weight: 700; }

h3 { margin-bottom: 7px; font-size: 13px; font-weight: 700; }

p { color: var(--muted); line-height: 1.45; }

.controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

input, select, textarea { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--ink); background: #ffffff; outline: none; font-size: 13px; }

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,163,74,.25); }



.btn, .tiny { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: none; font-weight: 600; white-space: nowrap; text-decoration: none; }

.btn { min-height: 38px; border: 1px solid var(--ink); padding: 8px 12px; color: var(--ink); background: var(--accent); font-size: 13px; }

.btn.secondary { color: var(--ink); background: #ffffff; border-color: var(--ink); }

.btn.signout-btn { color: #ffffff; background: #b42323; border-color: #b42323; }

.btn.signout-btn:hover { background: #941b1b; border-color: #941b1b; }

.btn:disabled, .tiny:disabled, .btn.busy, .tiny.busy { opacity: .58; cursor: wait; }
.btn[type="submit"]:disabled, #contractSaveButton:disabled { color: #ffffff; background: #8b8b82; border-color: #8b8b82; opacity: 1; }
.landing-actions .btn.secondary { color: #101415; background: #ffffff; border-color: #cdd5cf; }

.tiny { min-height: 30px; border: 1px solid var(--ink); padding: 5px 9px; color: var(--ink); background: var(--surface-2); font-size: 12px; }

.tiny[data-action="remind"], .tiny[data-action="warn"] { border-color: var(--accent); background: var(--accent); }

.tiny[data-action="restrict"] { color: #ffffff; border-color: var(--ink); background: var(--ink); }

.tiny[data-level="Lock screen message"] { color: var(--ink); border-color: var(--ink); background: #ffffff; }

.tiny[data-level="Limited access"] { color: #ffffff; border-color: #3a3a3a; background: #3a3a3a; }

.tiny.danger { color: var(--accent); border-color: var(--ink); background: var(--ink); }

.tiny.success { color: var(--ink); border-color: var(--accent); background: var(--accent); }

.tiny.delete { color: #ffffff; border-color: #9f1d1d; background: #9f1d1d; }



.command-band { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: 18px; margin-bottom: 18px; }

.health-panel, .panel, .metric, .chart-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; }

.health-panel { display: grid; align-content: space-between; min-height: 214px; padding: 18px; background: var(--nav); border-color: var(--nav); color: #ffffff; }

.health-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

.health-score { display: grid; place-items: center; width: 74px; height: 54px; border: 1px solid rgba(22,163,74,.45); border-radius: 8px; color: var(--accent); font-size: 26px; font-weight: 700; }

.health-copy .eyebrow { color: #bdbdb8; }

.health-copy strong { display: block; max-width: 390px; font-size: 18px; line-height: 1.2; font-weight: 700; }

.health-copy p { margin: 8px 0 0; max-width: 430px; color: #c9c9c6; font-size: 13px; }

.health-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }

.health-strip span, .metric span, .signal span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 500; text-transform: uppercase; }

.health-strip span { color: #bdbdb8; }

.health-strip strong { display: block; margin-top: 5px; color: #ffffff; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }

.command-band .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }

.ecosystem-grid { margin-top: 8px; }

.metric { min-height: 102px; padding: 14px; position: relative; overflow: hidden; }

.metric::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: currentColor; opacity: .72; }

.metric strong { display: block; margin: 8px 0 6px; font-size: 20px; line-height: 1.08; font-weight: 700; overflow-wrap: anywhere; }

.metric small { color: var(--muted); line-height: 1.35; font-size: 12px; }

.metric.green strong { color: var(--green); }

.metric.blue strong { color: var(--blue); }

.metric.accent strong { color: var(--accent); }

.metric.red strong { color: var(--red); }

.metric.violet strong { color: var(--violet); }



.command-surface { margin-bottom: 24px; padding: 4px 0 24px; border-bottom: 1px solid var(--line); background: transparent; }

.command-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }

.command-lead h2 { max-width: 680px; margin: 5px 0 0; font-size: 22px; line-height: 1.12; font-weight: 700; }

.command-lead p { max-width: 640px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.command-score { min-width: 170px; padding-left: 22px; border-left: 1px solid var(--line); text-align: right; }

.command-score span, .command-score small, .command-metric span, .command-metric small, .portfolio-status-line > span, .status-pill span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 500; text-transform: uppercase; }

.command-score strong { display: block; color: var(--ink); font-size: 28px; line-height: 1; font-weight: 700; }

.command-score small { margin-top: 6px; }

.command-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }

.command-metric { --accent: var(--ink); position: relative; min-height: 104px; padding: 15px 18px 16px; border-left: 1px solid var(--line); background: transparent; }

.command-metric:first-child { border-left: 0; }

.command-metric::before { content: ""; position: absolute; left: 18px; top: -2px; width: 44px; height: 2px; background: var(--accent); }

.command-metric.ink, .status-pill.ink { --accent: var(--ink); }

.command-metric.green-accent, .status-pill.green-accent { --accent: var(--accent); }

.command-metric.neutral, .status-pill.neutral { --accent: #8b8b82; }

.command-metric.dark, .status-pill.dark { --accent: #3a3a3a; }

.command-metric strong { display: block; margin: 10px 0 7px; color: var(--ink); font-size: 19px; line-height: 1.08; font-weight: 700; overflow-wrap: anywhere; }

.command-metric small { line-height: 1.35; text-transform: none; }

.command-insights { display: grid; grid-template-columns: minmax(280px, 430px) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

.portfolio-status-line { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: stretch; margin-top: 0; }

.portfolio-status-line > span { padding-top: 12px; }

.status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.status-pill { position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 46px; padding: 10px 14px; border-left: 1px solid var(--line); }

.status-pill:first-child { border-left: 0; }

.status-pill::before { content: ""; width: 9px; height: 9px; flex: 0 0 9px; background: var(--accent); }

.status-pill strong { margin-left: auto; font-size: 14px; font-weight: 700; }

.command-chart { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }

.command-chart .chart-head { margin-bottom: 6px; }

.command-chart .chart-head h2 { font-size: 13px; font-weight: 700; }

.command-chart .chart-head p { font-size: 12px; }

.command-chart .badge { display: none; }

.command-chart .pie-layout { grid-template-columns: 146px minmax(0, 1fr); gap: 14px; min-height: 146px; }

.command-chart .pie-layout .chart-svg { min-height: 136px; }

.command-chart .pie-legend { gap: 7px; }

.command-chart .legend-item { font-size: 12px; }

.command-ledger { margin-bottom: 18px; background: transparent; }

.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.section-head p { margin-bottom: 0; font-size: 13px; }

.command-ledger .table-wrap { border-bottom: 1px solid var(--line); }



.layout { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(320px, .78fr); gap: 18px; margin-bottom: 18px; }

.layout-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }

.panel { padding: 18px; }

.panel + .panel { margin-top: 16px; }

.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }

.panel-head p { margin-bottom: 0; font-size: 13px; }

.muted { color: var(--muted); }

.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }

.signal { min-height: 88px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

.signal strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; }

.signal small { color: var(--muted); }



.table-wrap { width: 100%; overflow-x: auto; }

table { width: 100%; min-width: 980px; border-collapse: collapse; }

.table-wrap.compact table { min-width: 560px; }

th, td { padding: 11px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }

th { color: var(--muted); background: var(--surface-2); font-size: 10.5px; font-weight: 500; text-transform: uppercase; }

td { font-size: 13px; }

td.money-cell, .money-value { font-weight: 700; color: var(--ink); white-space: nowrap; }

tbody tr:hover td { background: #f0fdf4; }

.cell-main { display: grid; gap: 3px; }

.cell-main span { color: var(--muted); font-size: 12px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }



.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: transparent; }

.badge.Active, .badge.Pending, .badge.Live { color: var(--ink); background: transparent; border: 1px solid var(--line); }

.badge.Completed, .badge.Synced, .badge.Ready, .badge.Online { color: var(--ink); background: var(--accent-soft); border: 1px solid #86efac; }

.badge.Overdue, .badge.Attention { color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent); }

.badge.Restricted, .badge.Failed, .badge.Blocked, .badge.Offline { color: #ffffff; background: var(--ink); border: 1px solid var(--ink); }



.queue { display: grid; }

.queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }

.queue-row:first-child { border-top: 0; padding-top: 0; }

.queue-row p { margin-bottom: 0; font-size: 13px; }



.bar-list { display: grid; gap: 12px; }

.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px; gap: 10px; align-items: center; font-size: 13px; }

.bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }

.bar-fill { height: 100%; border-radius: 999px; background: var(--blue); }

.pipeline { display: grid; gap: 12px; }

.pipeline-row { display: grid; grid-template-columns: 118px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }

.pipeline-row:first-child { border-top: 0; }

.pipeline-line { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }

.pipeline-fill { height: 100%; border-radius: 999px; background: var(--teal); }

.compat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.compat-row { min-height: 122px; padding: 14px 0; border-top: 1px solid var(--line); }

.compat-row:first-child { border-top: 0; }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }

.chart-grid-single { grid-template-columns: minmax(280px, 520px); }

.chart-panel { padding: 18px; min-height: 250px; }

.chart-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

.chart-head p { margin-bottom: 0; font-size: 13px; }

.chart-svg { display: block; width: 100%; height: auto; min-height: 190px; }

.chart-label { fill: var(--muted); font-size: 12px; font-weight: 400; }

.chart-title { fill: var(--ink); font-size: 14px; font-weight: 500; }

.chart-axis { stroke: var(--line); stroke-width: 1; }

.chart-blue { fill: var(--blue); stroke: var(--blue); }

.chart-teal { fill: var(--teal); stroke: var(--teal); }

.chart-accent { fill: var(--accent); stroke: var(--accent); }

.chart-red { fill: var(--red); stroke: var(--red); }

.chart-green { fill: var(--green); stroke: var(--green); }

.pie-layout { display: grid; grid-template-columns: 176px 1fr; gap: 18px; align-items: center; min-height: 190px; }

.pie-layout .chart-svg { min-height: 160px; }

.pie-legend { display: grid; gap: 10px; }

.legend-item { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }

.legend-dot { width: 10px; height: 10px; border-radius: 999px; background: currentColor; }

.legend-dot.chart-blue { background: var(--blue); }

.legend-dot.chart-teal { background: var(--teal); }

.legend-dot.chart-accent { background: var(--accent); }

.legend-dot.chart-red { background: var(--red); }

.legend-dot.chart-green { background: var(--green); }



form { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 12px; }

.logout-form { display: block; }

.logout-form .btn { width: auto; }

label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }

.form-wide { grid-column: 1 / -1; }

.form-section { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: 10px; align-items: end; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); }

.form-section:first-of-type { padding-top: 0; border-top: 0; }

.form-section strong { font-size: 13px; font-weight: 500; }

.form-section span { color: var(--muted); font-size: 12px; line-height: 1.35; }

.form-summary { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--accent-soft); }

.form-summary span, .form-summary small { color: var(--muted); font-size: 12px; }

.form-summary strong { font-size: 18px; font-weight: 700; }

.readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.readiness-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }

.readiness-row:first-child { border-top: 0; }

.readiness-row > p { grid-column: 1; margin-bottom: 0; }

.readiness-row > .badge { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

.toast { position: fixed; right: 18px; bottom: 18px; max-width: min(380px, calc(100vw - 36px)); padding: 12px 14px; border-radius: 8px; color: #ffffff; background: var(--nav); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }

.toast.show { opacity: 1; transform: translateY(0); }

.empty { padding: 24px 8px; color: var(--muted); text-align: center; }



@media (max-width: 1120px) {

  .landing-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 54px; }

  .hero-content { max-width: 720px; }

  .landing-hero .hero-content { order: 1; }

  .landing-hero .hero-media { order: 2; }

  .hero-media { min-height: 500px; }

  .product-window { max-width: 820px; }

  .phone-preview { right: 18px; }

  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .brand-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .platform-band, .proof-section { grid-template-columns: 1fr; }

  .command-band, .layout, .layout-even { grid-template-columns: 1fr; }

  .command-metrics, .status-strip, .metric-grid, .signal-grid, .readiness-grid, .compat-grid, .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 860px) {

  .intake-panel { grid-template-columns: 1fr; align-self: start; padding-top: 42px; }

  .landing-nav { grid-template-columns: auto auto; justify-content: space-between; }

  .landing-menu { display: none; }

  .landing-nav-actions { gap: 8px; }

  .landing-hero { padding-top: 46px; }

  .hero-content { max-width: 560px; }

  .hero-media { min-height: 440px; }

  .product-window { min-height: 380px; }

  .phone-preview { right: 18px; width: 138px; min-height: 236px; }

  .landing-next, .brand-strip { grid-template-columns: 1fr; }

  .auth-body { grid-template-columns: 1fr; }

  .auth-art { min-height: 48vh; }

  .shell { grid-template-columns: 1fr; }

  aside { position: static; height: auto; gap: 16px; }

  nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  nav button { justify-content: center; text-align: center; padding: 8px; }

  nav button::before { display: none; }

  header { display: grid; }

  .controls { justify-content: stretch; }

  .controls > * { flex: 1 1 180px; }

  .command-lead { grid-template-columns: 1fr; align-items: start; }

  .command-score { min-width: 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); text-align: left; }

  .command-insights { grid-template-columns: 1fr; gap: 18px; }

  form { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 560px) {

  .landing-nav { grid-template-columns: 1fr; gap: 12px; align-items: start; }

  .landing-logo { font-size: 20px; }

  .landing-nav-actions { justify-content: stretch; }

  .landing-nav-actions .btn, .landing-nav-actions .landing-link { width: 100%; justify-content: center; }

  .landing-hero { padding: 42px 18px 46px; }

  .landing-hero h1 { font-size: 40px; }

  .landing-copy { max-width: 340px; font-size: 15px; }

  .hero-stats { grid-template-columns: 1fr; }

  .landing-actions .btn { width: 100%; }

  .hero-media { min-height: auto; width: 100%; overflow: hidden; }

  .product-window { width: 100%; min-height: auto; padding: 12px; transform: none; }

  .window-grid { grid-template-columns: 1fr; gap: 8px; }

  .window-metric { min-height: 96px; padding: 10px; }

  .window-metric strong { font-size: 18px; }

  .window-table { min-height: 150px; padding: 10px; }

  .window-table div { grid-template-columns: 1fr auto; }

  .window-table span { display: none; }

  .phone-preview { display: none; }

  .landing-section, .platform-band, .proof-section, .final-cta { padding-left: 18px; padding-right: 18px; }

  .solution-grid, .auth-visual { grid-template-columns: 1fr; }

  .platform-rows div { grid-template-columns: 1fr; }

  .proof-card p { font-size: 24px; }

  .auth-panel { align-items: start; }

  main { padding: 14px; }

  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .command-metrics, .status-strip, .portfolio-status-line, .metric-grid, .signal-grid, .health-strip, .readiness-grid, .compat-grid, .chart-grid, form { grid-template-columns: 1fr; }

  .command-metric { border-left: 0; border-top: 1px solid var(--line); }

  .command-metric:first-child { border-top: 0; }

  .status-pill { border-left: 0; border-top: 1px solid var(--line); }

  .status-pill:first-child { border-top: 0; }

  .health-top, .section-head, .panel-head, .queue-row, .bar-row, .pipeline-row, .readiness-row, .pie-layout { display: grid; grid-template-columns: 1fr; }

  .btn { width: 100%; }

}



@media (max-width: 1120px) {

  .landing-body main { padding: 0; }

  .landing-hero { grid-template-columns: 1fr; gap: 34px; min-height: auto; padding-top: 52px; }

  .landing-hero .hero-content, .landing-hero .hero-media { order: initial; }

  .hero-media { min-height: 0; }

  .dashboard-preview { max-width: 720px; margin-left: 0; }

  .solution-grid, .how-section, .platform-band { grid-template-columns: 1fr; }

  .auth-main { grid-template-columns: 1fr; gap: 32px; min-height: auto; }

  .auth-panel { max-width: 560px; }

}



@media (max-width: 760px) {

  .auth-nav { grid-template-columns: 1fr; gap: 12px; align-items: start; padding: 16px 18px; }

  .auth-links { justify-content: flex-start; gap: 18px; }

  .auth-main { padding: 42px 18px 38px; }

  .auth-copy h1 { max-width: 330px; font-size: 32px; line-height: 1.08; }

  .auth-copy p { font-size: 15px; }

  .auth-summary { grid-template-columns: 1fr; margin-top: 26px; }

  .auth-summary div { min-height: auto; }

  .auth-form { padding: 20px; }

  .auth-note { display: grid; gap: 4px; }

  .landing-nav { grid-template-columns: 1fr auto; gap: 12px; }

  .landing-menu { display: none; }

  .landing-nav-actions { grid-column: 1 / -1; justify-content: stretch; }

  .landing-nav-actions .landing-link, .landing-nav-actions .btn { flex: 1 1 0; justify-content: center; }

  .landing-hero { padding: 42px 18px 38px; }

  .landing-hero h1 { max-width: 330px; font-size: 30px; line-height: 1.1; }

  .landing-copy { max-width: 100%; font-size: 15px; }

  .landing-actions .btn { width: 100%; }

  .landing-next, .preview-stats { grid-template-columns: 1fr; }

  .dashboard-preview { width: 100%; max-width: 100%; padding: 14px; overflow: hidden; }

  .preview-head { display: grid; grid-template-columns: 1fr; }

  .preview-list div { grid-template-columns: 1fr auto; }

  .preview-list div span { display: none; }

  .preview-list em { min-width: 76px; }

  .landing-section, .how-section, .platform-band, .final-cta { padding: 48px 18px; }

  .section-copy h2, .how-section h2, .platform-copy h2, .final-cta h2 { font-size: 28px; }

  .solution-grid { grid-template-columns: 1fr; }

  .platform-rows div, .how-steps article { grid-template-columns: 1fr; }

  .landing-footer { grid-template-columns: 1fr; gap: 20px; padding: 28px 18px; }

  .footer-meta { text-align: left; }

}



/* Dribbble-inspired dark SaaS landing. */

.landing-body { color: #f6efff; background: #1d1236; font-family: Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; }

.landing-body .saas-landing { min-height: 100vh; padding: 0; background: #1d1236; }

.saas-hero { position: relative; isolation: isolate; max-width: 1368px; min-height: 748px; margin: 0 auto; overflow: hidden; color: #f8f2ff; background: #05010d; border: 1px solid rgba(216,198,254,.08); }

.saas-hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background-image: radial-gradient(circle at 19% 18%, rgba(216,198,254,.36) 0 1px, transparent 2px), radial-gradient(circle at 57% 7%, rgba(216,198,254,.42) 0 1px, transparent 2px), radial-gradient(circle at 81% 25%, rgba(216,198,254,.3) 0 1px, transparent 2px), radial-gradient(circle at 72% 54%, rgba(216,198,254,.36) 0 1px, transparent 2px), radial-gradient(circle at 24% 57%, rgba(216,198,254,.24) 0 1px, transparent 2px); }

.saas-hero::after { content: ""; position: absolute; left: 50%; bottom: 94px; z-index: -2; width: 1240px; max-width: 145%; height: 360px; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at center bottom, rgba(82,37,229,.72), rgba(56,33,176,.48) 30%, rgba(2,1,5,0) 72%); filter: blur(1px); }

.landing-body .landing-nav { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; min-height: 90px; margin: 0; padding: 26px clamp(22px, 8vw, 118px); color: #f9f2ff; background: transparent; border: 0; }

.landing-body .landing-logo { display: inline-flex; align-items: center; gap: 10px; color: #f9f2ff; font-size: 23px; font-weight: 800; line-height: 1; letter-spacing: 0; }

.logo-symbol { position: relative; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 8px; background: radial-gradient(circle at 6px 6px, #8e79fa 0 3px, transparent 3.8px), radial-gradient(circle at 14px 6px, #5225e5 0 3px, transparent 3.8px), radial-gradient(circle at 22px 6px, #d8c6fe 0 3px, transparent 3.8px), radial-gradient(circle at 6px 14px, #5225e5 0 3px, transparent 3.8px), radial-gradient(circle at 14px 14px, #8e79fa 0 3px, transparent 3.8px), radial-gradient(circle at 22px 14px, #5225e5 0 3px, transparent 3.8px), radial-gradient(circle at 6px 22px, #d8c6fe 0 3px, transparent 3.8px), radial-gradient(circle at 14px 22px, #5225e5 0 3px, transparent 3.8px), radial-gradient(circle at 22px 22px, #8e79fa 0 3px, transparent 3.8px); }

.landing-body .landing-menu { display: flex; justify-content: center; gap: clamp(18px, 3vw, 42px); }

.landing-body .landing-menu a { color: rgba(248,242,255,.74); font-size: 12px; font-weight: 600; }

.landing-body .landing-menu a:hover { color: #ffffff; }

.landing-body .landing-nav-actions { display: flex; justify-content: flex-end; }

.landing-body .landing-link { min-height: 41px; padding: 10px 18px; color: #ffffff; border: 1px solid rgba(142,121,250,.9); border-radius: 10px; background: rgba(82,37,229,.08); font-size: 12px; font-weight: 700; }

.hero-content { position: relative; z-index: 1; display: grid; justify-items: center; max-width: 930px; margin: 78px auto 0; padding: 0 22px; text-align: center; }

.saas-hero .eyebrow { margin-bottom: 16px; color: #d8c6fe; font-size: 12px; letter-spacing: 0; text-transform: uppercase; }

.saas-hero h1 { max-width: 1040px; margin: 0; color: #f5efff; font-size: clamp(48px, 6vw, 78px); line-height: 1.08; font-weight: 800; letter-spacing: 0; }

.saas-hero h1 span { display: block; margin-top: 8px; color: #9b6cff; }

.saas-hero .landing-copy { max-width: 560px; margin: 28px 0 0; color: rgba(248,242,255,.74); font-size: 14px; line-height: 1.55; }

.saas-hero .landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 38px; }

.landing-body .btn { min-height: 53px; padding: 14px 25px; border-radius: 999px; border-color: #a56cff; color: #12051d; background: #a56cff; font-size: 13px; font-weight: 800; box-shadow: 0 16px 36px rgba(82,37,229,.26); }

.landing-body .btn.secondary { color: #ffffff; background: rgba(255,255,255,.02); border-color: rgba(216,198,254,.7); box-shadow: none; }

.hero-stars span { position: absolute; z-index: 1; width: 25px; height: 25px; }

.hero-stars span::before, .hero-stars span::after { content: ""; position: absolute; inset: 0; margin: auto; background: #8e79fa; }

.hero-stars span::before { width: 2px; height: 25px; }

.hero-stars span::after { width: 25px; height: 2px; }

.hero-stars span:nth-child(1) { left: 19%; top: 28%; }

.hero-stars span:nth-child(2) { right: 18%; top: 50%; transform: scale(.9); }

.hero-stars span:nth-child(3) { left: 45%; top: 7%; transform: scale(.35); opacity: .7; }

.hero-stars span:nth-child(4) { right: 28%; top: 35%; transform: scale(.3); opacity: .55; }

.hero-stars span:nth-child(5) { left: 62%; top: 53%; transform: scale(.28); opacity: .55; }

.hero-orbit { position: absolute; left: 50%; bottom: 118px; z-index: -1; width: 1320px; max-width: 152%; height: 330px; transform: translateX(-50%); border-bottom: 1px solid rgba(142,121,250,.18); border-radius: 0 0 50% 50%; background: linear-gradient(180deg, rgba(2,1,5,0), rgba(82,37,229,.11)); }

.partner-strip { position: relative; z-index: 1; display: grid; justify-items: center; gap: 26px; max-width: 1020px; margin: 178px auto 0; padding: 0 22px 42px; text-align: center; }

.partner-strip p { margin: 0; color: #ffffff; font-size: 19px; font-weight: 800; }

.partner-strip div { display: grid; grid-template-columns: repeat(7, minmax(64px, 1fr)); gap: clamp(14px, 4vw, 46px); align-items: center; width: 100%; }

.partner-strip span { display: grid; place-items: center; min-height: 44px; color: #d8c6fe; font-size: 16px; font-weight: 800; opacity: .88; }

.landing-body .landing-section, .landing-body .how-section, .landing-body .final-cta { max-width: 1368px; margin: 0 auto; padding: 86px clamp(22px, 8vw, 118px); color: #f8f2ff; background: #0a0614; border-top: 1px solid rgba(216,198,254,.1); }

.landing-body .section-copy { max-width: 760px; margin-bottom: 34px; }

.landing-body .section-copy h2, .landing-body .how-section h2, .landing-body .final-cta h2 { max-width: 760px; color: #ffffff; font-size: clamp(34px, 4.5vw, 58px); line-height: 1.08; font-weight: 800; letter-spacing: 0; }

.landing-body .section-copy p, .landing-body .how-section p { color: rgba(248,242,255,.68); font-size: 15px; line-height: 1.6; }

.showcase-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 22px; align-items: stretch; }

.saas-landing .dashboard-preview { max-width: none; margin: 0; padding: 18px; color: #f8f2ff; border: 1px solid rgba(216,198,254,.16); border-radius: 18px; background: linear-gradient(145deg, rgba(49,37,90,.9), rgba(2,1,5,.92)); box-shadow: 0 26px 70px rgba(0,0,0,.28); }

.saas-landing .preview-head { border-bottom-color: rgba(216,198,254,.13); }

.saas-landing .preview-head span, .saas-landing .preview-stats span, .saas-landing .preview-note { color: rgba(216,198,254,.75); }

.saas-landing .preview-stats div, .saas-landing .preview-list { border-color: rgba(216,198,254,.15); background: rgba(255,255,255,.04); }

.saas-landing .preview-stats strong, .saas-landing .preview-list strong { color: #ffffff; }

.saas-landing .preview-list div { border-top-color: rgba(216,198,254,.12); }

.saas-landing .preview-list span { color: rgba(248,242,255,.58); }

.saas-landing .preview-list em { color: #d8c6fe; border-color: rgba(216,198,254,.28); background: rgba(142,121,250,.12); }

.saas-landing .preview-note span { background: #8e79fa; }

.landing-body .platform-rows { display: grid; gap: 12px; }

.landing-body .platform-rows div { display: grid; grid-template-columns: minmax(150px, .72fr) 1fr; gap: 16px; align-items: center; min-height: 78px; padding: 18px 20px; border: 1px solid rgba(216,198,254,.15); border-radius: 16px; background: rgba(255,255,255,.04); }

.landing-body .platform-rows strong { color: #ffffff; font-size: 16px; font-weight: 800; }

.landing-body .platform-rows span { color: rgba(248,242,255,.64); font-size: 13px; line-height: 1.45; }

.feature-band { background: #11091f !important; }

.landing-body .solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.landing-body .solution-grid article { min-height: 232px; padding: 22px; border: 1px solid rgba(216,198,254,.15); border-radius: 18px; background: linear-gradient(180deg, rgba(49,37,90,.72), rgba(12,6,24,.88)); }

.landing-body .solution-grid span { color: #d8c6fe; font-size: 12px; font-weight: 800; }

.landing-body .solution-grid h3 { margin: 54px 0 12px; color: #ffffff; font-size: 20px; line-height: 1.15; font-weight: 800; }

.landing-body .solution-grid p { color: rgba(248,242,255,.64); font-size: 14px; line-height: 1.55; }

.landing-body .how-section { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 34px; background: #0a0614; }

.landing-body .how-steps { display: grid; gap: 12px; }

.landing-body .how-steps article { display: grid; grid-template-columns: 42px 1fr; gap: 8px 16px; padding: 20px; border: 1px solid rgba(216,198,254,.15); border-radius: 18px; background: rgba(255,255,255,.04); }

.landing-body .how-steps span { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: #12051d; background: #a56cff; font-weight: 800; }

.landing-body .how-steps strong { color: #ffffff; font-size: 17px; font-weight: 800; }

.landing-body .how-steps p { margin: 0; font-size: 14px; }

.landing-body .final-cta { display: grid; justify-items: center; gap: 14px; text-align: center; background: #05010d; }

.landing-body .final-cta h2 { max-width: 760px; }

.landing-body > .landing-footer { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(280px, 1fr) auto; gap: 28px; align-items: center; max-width: 1368px; margin: 0 auto; padding: 34px clamp(22px, 8vw, 118px); color: #f8f2ff; background: #05010d; border-top: 1px solid rgba(216,198,254,.1); }

.landing-body > .landing-footer p { max-width: 520px; margin: 0; color: rgba(248,242,255,.62); font-size: 14px; line-height: 1.5; }

.landing-body > .landing-footer .footer-meta { display: grid; gap: 8px; color: rgba(216,198,254,.72); font-size: 12px; text-align: right; text-transform: uppercase; }



@media (max-width: 1120px) {

  .saas-hero { min-height: 700px; }

  .landing-body .landing-nav { padding-inline: 28px; }

  .landing-body .landing-menu { gap: 18px; }

  .showcase-grid, .landing-body .how-section { grid-template-columns: 1fr; }

  .landing-body .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



@media (max-width: 760px) {

  .landing-body { overflow-x: hidden; }

  .saas-landing, .saas-hero { width: 100%; max-width: 100vw; overflow-x: hidden; }

  .landing-body .landing-nav { grid-template-columns: 1fr auto; gap: 14px; min-height: auto; padding: 20px 18px; }

  .landing-body .landing-menu { display: none; }

  .landing-body .landing-nav-actions { display: none; }

  .landing-body .landing-link { min-height: 38px; padding: 9px 13px; }

  .hero-content { margin-top: 58px; padding-inline: 18px; overflow: hidden; }

  .saas-hero { min-height: 674px; }

  .saas-hero h1 { max-width: 320px; font-size: 38px; }

  .saas-hero .landing-copy { max-width: 300px; font-size: 13px; }

  .saas-hero .landing-actions { width: 100%; max-width: 300px; gap: 12px; }

  .landing-body .btn { width: 100%; min-height: 48px; }

  .hero-stars span:nth-child(1) { left: 11%; top: 25%; }

  .hero-stars span:nth-child(2) { right: 11%; top: 55%; }

  .partner-strip { max-width: 320px; margin-top: 126px; padding: 0 18px 30px; overflow: hidden; }

  .partner-strip p { font-size: 15px; }

  .partner-strip div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .partner-strip span { min-width: 0; min-height: 32px; font-size: 12px; }

  .landing-body .landing-section, .landing-body .how-section, .landing-body .final-cta { padding: 54px 18px; }

  .landing-body .section-copy h2, .landing-body .how-section h2, .landing-body .final-cta h2 { font-size: 31px; }

  .landing-body .solution-grid, .saas-landing .preview-stats { grid-template-columns: 1fr; }

  .landing-body .platform-rows div, .landing-body .how-steps article { grid-template-columns: 1fr; }

  .saas-landing .preview-list div { grid-template-columns: 1fr auto; }

  .saas-landing .preview-list div span { display: none; }

  .landing-body > .landing-footer { grid-template-columns: 1fr; gap: 16px; padding: 28px 18px; }

  .landing-body > .landing-footer .footer-meta { text-align: left; }

}



/* KISMART theme override: full-width black, white, and green. */

.landing-body { color: #ffffff; background: #050505; overflow-x: hidden; font-family: "Times New Roman", Times, serif; }

.landing-body .saas-landing { width: 100%; background: #050505; font-family: inherit; }

.saas-hero { width: 100%; max-width: none; min-height: 744px; border: 0; background: #050505; }

.saas-hero::before { background-image: radial-gradient(circle at 19% 18%, rgba(22,163,74,.48) 0 1px, transparent 2px), radial-gradient(circle at 57% 7%, rgba(255,255,255,.36) 0 1px, transparent 2px), radial-gradient(circle at 81% 25%, rgba(22,163,74,.34) 0 1px, transparent 2px), radial-gradient(circle at 72% 54%, rgba(255,255,255,.28) 0 1px, transparent 2px), radial-gradient(circle at 24% 57%, rgba(22,163,74,.3) 0 1px, transparent 2px); }

.saas-hero::after { background: radial-gradient(ellipse at center bottom, rgba(22,163,74,.46), rgba(22,163,74,.22) 34%, rgba(5,5,5,0) 72%); }

.landing-body .landing-nav { width: 100%; padding: 26px clamp(22px, 8vw, 118px); }

.logo-symbol { background: radial-gradient(circle at 6px 6px, #16a34a 0 3px, transparent 3.8px), radial-gradient(circle at 14px 6px, #ffffff 0 3px, transparent 3.8px), radial-gradient(circle at 22px 6px, #16a34a 0 3px, transparent 3.8px), radial-gradient(circle at 6px 14px, #ffffff 0 3px, transparent 3.8px), radial-gradient(circle at 14px 14px, #16a34a 0 3px, transparent 3.8px), radial-gradient(circle at 22px 14px, #ffffff 0 3px, transparent 3.8px), radial-gradient(circle at 6px 22px, #16a34a 0 3px, transparent 3.8px), radial-gradient(circle at 14px 22px, #ffffff 0 3px, transparent 3.8px), radial-gradient(circle at 22px 22px, #16a34a 0 3px, transparent 3.8px); }

.saas-hero .eyebrow { color: #16a34a; }

.saas-hero h1 { color: #ffffff; }

.saas-hero h1 span { color: #16a34a; }

.saas-hero .landing-copy { color: rgba(255,255,255,.72); }

.landing-body .btn { color: #0f0f0f; background: #16a34a; border-color: #16a34a; box-shadow: 0 18px 42px rgba(22,163,74,.2); }

.landing-body .btn.secondary { color: #ffffff; background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.72); }

.landing-body .landing-link { color: #0f0f0f; background: #16a34a; border-color: #16a34a; }

.hero-stars span::before, .hero-stars span::after { background: #16a34a; }

.hero-orbit { border-bottom-color: rgba(22,163,74,.24); background: linear-gradient(180deg, rgba(5,5,5,0), rgba(22,163,74,.1)); }

.partner-strip p { color: #ffffff; }

.partner-strip span { color: rgba(255,255,255,.78); }

.landing-body .landing-section, .landing-body .how-section, .landing-body .final-cta { max-width: none; margin: 0; color: #ffffff; background: #050505; border-top: 1px solid #202020; }

.landing-body .section-copy h2, .landing-body .how-section h2 { color: #ffffff; }

.landing-body .section-copy p, .landing-body .how-section p { color: rgba(255,255,255,.68); }

.showcase-grid { width: 100%; }

.saas-landing .dashboard-preview { color: #ffffff; border-color: #222222; background: #0f0f0f; box-shadow: none; }

.saas-landing .preview-head { border-bottom-color: rgba(22,163,74,.22); }

.saas-landing .preview-head span, .saas-landing .preview-stats span, .saas-landing .preview-note { color: rgba(22,163,74,.78); }

.saas-landing .preview-stats div, .saas-landing .preview-list { border-color: rgba(22,163,74,.18); background: rgba(255,255,255,.04); }

.saas-landing .preview-list div { border-top-color: rgba(22,163,74,.14); }

.saas-landing .preview-list em { color: #0f0f0f; border-color: #16a34a; background: #16a34a; }

.saas-landing .preview-note span { background: #16a34a; }

.landing-body .platform-rows div { border-color: #252525; background: #101010; }

.landing-body .platform-rows strong { color: #ffffff; }

.landing-body .platform-rows span { color: rgba(255,255,255,.64); }

.landing-body .feature-band { color: #ffffff; background: #050505 !important; border-top-color: #202020; }

.landing-body .feature-band .section-copy h2 { color: #ffffff; }

.landing-body .feature-band .section-copy p { color: rgba(255,255,255,.68); }

.landing-body .solution-grid article { border-color: #242424; background: #151515; }

.landing-body .solution-grid span { color: #16a34a; }

.landing-body .solution-grid h3 { color: #ffffff; }

.landing-body .solution-grid p { color: rgba(255,255,255,.68); }

.landing-body .how-steps article { border-color: #252525; background: #101010; }

.landing-body .how-steps span { color: #0f0f0f; background: #16a34a; }

.landing-body .how-steps strong { color: #ffffff; }

.landing-body .final-cta { color: #ffffff; background: #050505; border-top-color: #050505; }

.landing-body .final-cta .eyebrow { color: #16a34a; }

.landing-body .final-cta h2 { color: #ffffff; }

.landing-body > .landing-footer { max-width: none; margin: 0; color: #ffffff; background: #050505; border-top: 1px solid #222222; }

.landing-body > .landing-footer p { color: rgba(255,255,255,.62); }

.landing-body > .landing-footer .footer-meta { color: rgba(22,163,74,.82); }



@media (max-width: 760px) {

  .saas-hero { min-height: 668px; }

  .saas-hero h1 { max-width: 320px; font-size: 36px; }

  .saas-hero .landing-copy { max-width: 300px; }

}



@media (max-width: 980px) {

  .auth-stage { min-height: 100vh; padding: 20px 18px 24px; }

  .auth-scene { grid-template-columns: 1fr; min-height: auto; padding: 42px 0 28px; }

  .auth-side { display: none; }

  .auth-panel { width: min(100%, 430px); max-width: calc(100vw - 36px); }

}



@media (max-width: 560px) {

  .auth-body, .auth-stage { overflow-x: hidden; }

  .auth-nav { grid-template-columns: 1fr; gap: 14px; }

  .auth-links { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }

  .auth-demo { min-height: 34px; padding: 8px 12px; }

  .auth-scene { width: 100%; padding-top: 38px; }

  .auth-panel { width: 100%; max-width: 100%; }

  .auth-form { padding: 26px 20px 22px; border-radius: 22px; }

  .auth-access { grid-template-columns: 1fr; }

  .auth-footer { flex-wrap: wrap; text-align: center; }

}



.landing-body .solution-grid article { display: grid; align-content: start; overflow: hidden; padding: 0; }

.landing-body .solution-grid article img { display: block; width: 100%; height: 148px; object-fit: cover; border-bottom: 1px solid #242424; filter: saturate(.9) contrast(1.04); }

.landing-body .solution-grid article span, .landing-body .solution-grid article h3, .landing-body .solution-grid article p { margin-left: 22px; margin-right: 22px; }

.landing-body .solution-grid article span { margin-top: 20px; }

.landing-body .solution-grid article h3 { margin-top: 34px; }

.landing-body .solution-grid article p { margin-bottom: 22px; }

.saas-landing .dashboard-preview { color: #111111; border-color: #dbe7dd; background: #ffffff; box-shadow: 0 24px 70px rgba(22,163,74,.1); }

.saas-landing .preview-head { border-bottom-color: #dbe7dd; }

.saas-landing .preview-head span, .saas-landing .preview-stats span, .saas-landing .preview-note { color: #166534; }

.saas-landing .preview-stats div, .saas-landing .preview-list { border-color: #dbe7dd; background: #f0fdf4; }

.saas-landing .preview-stats strong, .saas-landing .preview-list strong { color: #111111; }

.saas-landing .preview-list div { border-top-color: #dbe7dd; }

.saas-landing .preview-list span { color: #555555; }

.saas-landing .preview-list em { color: #111111; border-color: #16a34a; background: #16a34a; }

.saas-landing .preview-note span { background: #16a34a; }

.landing-body .platform-rows div { border-color: #dbe7dd; background: #ffffff; box-shadow: 0 14px 38px rgba(22,163,74,.08); }

.landing-body .platform-rows strong { color: #111111; }

.landing-body .platform-rows span { color: #555555; }

#platform .section-copy h2 { color: #16a34a; }

.platform-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 38px; }

.platform-flow article { position: relative; min-height: 260px; padding: 24px; overflow: hidden; border: 1px solid #292929; border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(22,163,74,.18), rgba(22,163,74,0) 42%), #101010; }

.platform-flow article::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 24px; height: 1px; background: linear-gradient(90deg, #16a34a, transparent); }

.platform-flow span { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(22,163,74,.42); border-radius: 999px; color: #0f0f0f; background: #16a34a; font-size: 14px; font-weight: 800; }

.platform-flow h3 { margin: 52px 0 12px; color: #ffffff; font-size: 24px; line-height: 1.12; font-weight: 800; }

.platform-flow p { margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.55; }



@media (max-width: 760px) {

  .landing-body .solution-grid article img { height: 176px; }

  .platform-flow { grid-template-columns: 1fr; }

  .platform-flow article { min-height: 220px; }

}



.landing-body .faq-section { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(28px, 5vw, 70px); background: radial-gradient(circle at 12% 18%, rgba(22,163,74,.14), rgba(22,163,74,0) 34%), #050505; }

.faq-copy h2 { color: #ffffff; }

.faq-copy > p:not(.eyebrow) { max-width: 430px; color: rgba(255,255,255,.66); }

.faq-highlight { display: grid; gap: 8px; max-width: 380px; margin-top: 34px; padding: 24px; border: 1px solid rgba(22,163,74,.36); border-radius: 18px; color: #0f0f0f; background: #16a34a; box-shadow: 0 26px 80px rgba(22,163,74,.14); }

.faq-highlight span { font-size: 58px; line-height: .9; font-weight: 800; }

.faq-highlight strong { font-size: 20px; line-height: 1.1; font-weight: 800; }

.faq-highlight small { color: rgba(15,15,15,.76); font-size: 14px; line-height: 1.45; }

.landing-body .faq-list { gap: 14px; }

.landing-body .faq-list article { grid-template-columns: 58px 1fr; gap: 18px; min-height: 126px; padding: 24px; border-color: #2a2a2a; border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); }

.landing-body .faq-list article:hover { border-color: rgba(22,163,74,.52); background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.035)); }

.landing-body .faq-list span { width: 44px; height: 44px; font-size: 14px; }

.landing-body .faq-list strong { display: block; margin-bottom: 8px; font-size: 21px; line-height: 1.15; }

.landing-body .faq-list p { max-width: 680px; color: rgba(255,255,255,.66); font-size: 15px; line-height: 1.55; }

.landing-body > .landing-footer { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr); gap: clamp(28px, 5vw, 70px); align-items: start; padding-top: 64px; padding-bottom: 34px; border-top: 1px solid rgba(22,163,74,.42); background: radial-gradient(circle at 82% 0, rgba(22,163,74,.12), rgba(22,163,74,0) 34%), #050505; }

.footer-brand { display: grid; gap: 16px; }

.footer-logo { color: #ffffff; }

.landing-body > .landing-footer .footer-brand p { max-width: 360px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.55; }

.footer-cta { width: fit-content; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px; color: #0f0f0f; background: #16a34a; font-size: 14px; font-weight: 800; }

.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.footer-columns div { display: grid; gap: 10px; min-height: 178px; padding: 22px; border: 1px solid #242424; border-radius: 18px; background: #101010; }

.footer-columns strong { color: #16a34a; font-size: 15px; line-height: 1; }

.footer-columns a, .footer-columns span { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.35; }

.footer-columns a:hover { color: #ffffff; }

.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 26px; border-top: 1px solid #242424; color: rgba(255,255,255,.58); font-size: 13px; }

.footer-bottom span { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border: 1px solid #242424; border-radius: 999px; background: #0d0d0d; }



@media (max-width: 980px) {

  .landing-body .faq-section, .landing-body > .landing-footer { grid-template-columns: 1fr; }

  .footer-columns { grid-template-columns: 1fr; }

}



@media (max-width: 760px) {

  .landing-body .faq-list article { grid-template-columns: 1fr; }

  .faq-highlight span { font-size: 46px; }

  .landing-body > .landing-footer { padding: 48px 18px 28px; }

}



/* Landing-matched login theme. */

.auth-body { color: #ffffff; background: #050505; font-family: "Times New Roman", Times, serif; }

.auth-stage { background: radial-gradient(ellipse at center bottom, rgba(22,163,74,.2), rgba(5,5,5,0) 42%), #050505; }

.auth-stage::before { height: 52%; background: radial-gradient(ellipse at center bottom, rgba(22,163,74,.28), rgba(22,163,74,0) 68%); }

.auth-brand { color: #ffffff; font-size: 24px; }

.auth-mark { background: radial-gradient(circle at 5px 5px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 13px 5px, #ffffff 0 3px, transparent 3.7px), radial-gradient(circle at 21px 5px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 5px 13px, #ffffff 0 3px, transparent 3.7px), radial-gradient(circle at 13px 13px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 21px 13px, #ffffff 0 3px, transparent 3.7px), radial-gradient(circle at 5px 21px, #16a34a 0 3px, transparent 3.7px), radial-gradient(circle at 13px 21px, #ffffff 0 3px, transparent 3.7px), radial-gradient(circle at 21px 21px, #16a34a 0 3px, transparent 3.7px); }

.auth-links a { color: rgba(255,255,255,.74); }

.auth-links a:hover { color: #ffffff; }

.auth-demo { color: #0f0f0f !important; background: #16a34a; border-color: #16a34a; }

.auth-scene { min-height: 650px; }

.auth-form { border-color: #292929; color: #ffffff; background: linear-gradient(145deg, rgba(24,24,24,.98), rgba(9,9,9,.98)); box-shadow: 0 30px 90px rgba(22,163,74,.12); }

.auth-form .eyebrow { color: #16a34a; }

.auth-form h1 { color: #ffffff; font-size: 31px; }

.auth-form p { color: rgba(255,255,255,.7); }

.auth-form label { color: #ffffff; }

.auth-form input { color: #ffffff; border-color: #333333; background: #050505; }

.auth-form input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.auth-help { color: #16a34a; }

.auth-submit { color: #0f0f0f; background: #16a34a; border-color: #16a34a; }

.auth-divider { color: rgba(255,255,255,.62); }

.auth-divider span { background: #2b2b2b; }

.auth-access span { color: #ffffff; border-color: #333333; background: #101010; }

.auth-hint { color: rgba(255,255,255,.64); }

.auth-note { color: rgba(255,255,255,.62); }

.auth-note strong { color: #16a34a; }

.auth-footer { color: rgba(255,255,255,.6); }

.auth-footer span { background: rgba(22,163,74,.44); }

.auth-cardlet, .auth-device-card { border-color: rgba(22,163,74,.7); background: rgba(16,16,16,.72); }

.auth-cardlet span, .auth-device-card span { background: #16a34a; box-shadow: 0 12px 0 #16a34a; }

.auth-cardlet.graph span { border-color: #16a34a; background: transparent; box-shadow: none; }

.auth-dots { background-color: #16a34a; background-image: radial-gradient(#050505 0 3px, transparent 3.5px); }

.auth-squiggle, .auth-squiggle::after { border-color: #16a34a; }

.auth-operator .head, .auth-operator .body { background: #16a34a; }

.auth-operator .screen { border-color: #16a34a; background: #101010; }

.auth-operator::before { border-color: rgba(22,163,74,.7); background: rgba(16,16,16,.72); }

.auth-operator::after { border-left-color: #16a34a; border-bottom-color: #16a34a; }



@media (max-width: 980px) {

  .auth-scene { min-height: auto; }

}



@media (max-width: 560px) {

  .auth-stage { width: 100%; padding-left: 18px; padding-right: 18px; }

  .auth-scene { display: block; width: 100%; max-width: 100%; }

  .auth-panel { width: 100%; max-width: 100%; margin: 0; justify-items: stretch; }

  .auth-form { width: 100%; max-width: 100%; padding-left: 18px; padding-right: 18px; }

  .auth-form input, .auth-submit { width: 100%; max-width: 100%; }

}



/* Solid landing and login pass. */

.landing-body *, .landing-body *::before, .landing-body *::after,

.auth-body *, .auth-body *::before, .auth-body *::after {

  background-image: none !important;

  box-shadow: none !important;

  filter: none !important;

}

.landing-body,

.landing-body .saas-landing,

.saas-hero,

.landing-body .landing-section,

.landing-body .how-section,

.landing-body .final-cta,

.landing-body > .landing-footer,

.auth-body,

.auth-stage {

  background: #050505;

}

.saas-hero { min-height: 680px; color: #ffffff; }

.saas-hero::before,

.saas-hero::after,

.hero-stars,

.hero-orbit,

.auth-stage::before {

  display: none !important;

}

.landing-body .landing-nav {

  min-height: 82px;

  background: #050505;

  border-bottom: 1px solid #242424;

}

.landing-body .landing-logo,

.auth-brand {

  color: #ffffff;

}

.logo-symbol,

.auth-mark {

  border: 1px solid #16a34a;

  border-radius: 7px;

  background: #16a34a !important;

}

.landing-body .landing-menu a,

.auth-links a {

  color: #d6d6d6;

}

.landing-body .landing-menu a:hover,

.auth-links a:hover {

  color: #ffffff;

}

.hero-content { margin-top: 66px; }

.saas-hero h1,

.saas-hero h1 span,

.landing-body .section-copy h2,

.landing-body .how-section h2,

.landing-body .final-cta h2 {

  color: #ffffff;

}

.saas-hero .eyebrow,

.landing-body .eyebrow,

#platform .section-copy h2,

.footer-columns strong,

.auth-form .eyebrow,

.auth-note strong {

  color: #16a34a;

}

.saas-hero .landing-copy,

.landing-body .section-copy p,

.landing-body .how-section p,

.landing-body .solution-grid p,

.platform-flow p,

.landing-body > .landing-footer p,

.footer-columns a,

.footer-columns span,

.auth-form p,

.auth-note {

  color: #cfcfcf;

}

.landing-body .btn,

.landing-body .landing-link,

.footer-cta,

.auth-demo,

.auth-submit {

  color: #0f0f0f !important;

  border-color: #16a34a;

  border-radius: 8px;

  background: #16a34a !important;

}

.landing-body .btn.secondary {

  color: #ffffff !important;

  border-color: #4a4a4a;

  background: #050505 !important;

}

.partner-strip {

  margin-top: 138px;

}

.partner-strip p,

.partner-strip span {

  color: #ffffff;

}

.platform-flow article,

.landing-body .solution-grid article,

.landing-body .how-steps article,

.footer-columns div {

  border-color: #292929;

  border-radius: 8px;

  background: #101010;

}

.platform-flow article::after {

  display: none;

}

.platform-flow span,

.landing-body .how-steps span {

  color: #0f0f0f;

  border-color: #16a34a;

  background: #16a34a;

}

.platform-flow h3,

.landing-body .solution-grid h3,

.landing-body .how-steps strong {

  color: #ffffff;

}

.landing-body .solution-grid article img {

  border-bottom-color: #292929;

}

.landing-body .setup-section {

  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);

  gap: clamp(22px, 4vw, 44px);

  padding-top: 62px;

  padding-bottom: 62px;

}

.setup-copy p {

  max-width: 520px;

}

.landing-body .setup-list {

  gap: 10px;

}

.landing-body .setup-list article {

  min-height: auto;

  padding: 18px;

}

.landing-body .setup-list strong {

  margin-bottom: 6px;

  font-size: 18px;

}

.landing-body .setup-list p {

  max-width: 720px;

  font-size: 14px;

}

.faq-highlight {

  display: none;

}

.landing-body > .landing-footer {

  border-top-color: #242424;

}

.footer-bottom {

  border-top-color: #242424;

  color: #a8a8a8;

}

.footer-bottom span {

  border-color: #292929;

  background: #101010;

}

.auth-stage {

  padding: clamp(20px, 4vw, 52px) clamp(18px, 5vw, 68px);

}

.auth-scene {

  grid-template-columns: minmax(320px, 460px);

  justify-content: center;

  min-height: 620px;

}

.auth-side {

  display: none;

}

.auth-panel {

  max-width: 460px;

}

.auth-form {

  border-color: #292929;

  border-radius: 8px;

  color: #ffffff;

  background: #101010;

}

.auth-form h1,

.auth-form label {

  color: #ffffff;

}

.auth-form input {

  color: #ffffff;

  border-color: #333333;

  background: #050505;

}

.auth-form input:focus {

  border-color: #16a34a;

}

.auth-access span {

  color: #ffffff;

  border-color: #333333;

  background: #050505;

}

.auth-divider span {

  background: #333333;

}

.auth-help {

  color: #16a34a;

}



@media (max-width: 980px) {

  .landing-body .setup-section {

    grid-template-columns: 1fr;

  }

  .auth-scene {

    grid-template-columns: minmax(0, 460px);

  }

}



@media (max-width: 760px) {

  .saas-hero {

    min-height: 620px;

  }

  .hero-content {

    margin-top: 44px;

  }

  .partner-strip {

    margin-top: 96px;

  }

  .landing-body .setup-section {

    padding-top: 48px;

    padding-bottom: 48px;

  }

}



/* Follow-up polish: original marks, simpler nav, white login. */

.landing-body .landing-menu {

  gap: clamp(22px, 4vw, 56px);

}

.logo-symbol {

  border: 0;

  border-radius: 8px;

  background:

    radial-gradient(circle at 6px 6px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 14px 6px, #ffffff 0 3px, transparent 3.8px),

    radial-gradient(circle at 22px 6px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 6px 14px, #ffffff 0 3px, transparent 3.8px),

    radial-gradient(circle at 14px 14px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 22px 14px, #ffffff 0 3px, transparent 3.8px),

    radial-gradient(circle at 6px 22px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 14px 22px, #ffffff 0 3px, transparent 3.8px),

    radial-gradient(circle at 22px 22px, #16a34a 0 3px, transparent 3.8px) !important;

}

.auth-body,

.auth-stage {

  color: #111111;

  background: #ffffff;

}

.auth-brand {

  color: #111111;

}

.auth-mark {

  border: 0;

  border-radius: 0;

  background:

    radial-gradient(circle at 5px 5px, #16a34a 0 3px, transparent 3.7px),

    radial-gradient(circle at 13px 5px, #111111 0 3px, transparent 3.7px),

    radial-gradient(circle at 21px 5px, #16a34a 0 3px, transparent 3.7px),

    radial-gradient(circle at 5px 13px, #111111 0 3px, transparent 3.7px),

    radial-gradient(circle at 13px 13px, #16a34a 0 3px, transparent 3.7px),

    radial-gradient(circle at 21px 13px, #111111 0 3px, transparent 3.7px),

    radial-gradient(circle at 5px 21px, #16a34a 0 3px, transparent 3.7px),

    radial-gradient(circle at 13px 21px, #111111 0 3px, transparent 3.7px),

    radial-gradient(circle at 21px 21px, #16a34a 0 3px, transparent 3.7px) !important;

}

.auth-links a {

  color: #222222;

}

.auth-links a:hover {

  color: #000000;

}

.auth-form {

  color: #111111;

  border-color: #dfe7df;

  background: #ffffff;

}

.auth-form h1,

.auth-form label {

  color: #111111;

}

.auth-form p,

.auth-note,

.auth-hint,

.auth-divider {

  color: #555555;

}

.auth-form input {

  color: #111111;

  border-color: #cbd8cd;

  background: #ffffff;

}

.auth-access span {

  color: #111111;

  border-color: #dfe7df;

  background: #ffffff;

}

.auth-divider span {

  background: #dfe7df;

}

.auth-help,

.auth-note strong {

  color: #166534;

}



/* White landing pass. */

.landing-body,

.landing-body .saas-landing,

.saas-hero,

.landing-body .landing-nav,

.landing-body .landing-section,

.landing-body .how-section,

.landing-body .final-cta,

.landing-body > .landing-footer {

  color: #111111;

  background: #ffffff;

}

.landing-body .landing-nav,

.saas-hero,

.landing-body .landing-section,

.landing-body .how-section,

.landing-body .final-cta,

.landing-body > .landing-footer {

  border-color: #dfe7df;

}

.landing-body .landing-logo,

.landing-body .landing-menu a,

.partner-strip p,

.partner-strip span,

.saas-hero h1,

.saas-hero h1 span,

.landing-body .section-copy h2,

#platform .section-copy h2,

.landing-body .how-section h2,

.landing-body .final-cta h2,

.platform-flow h3,

.landing-body .solution-grid h3,

.landing-body .how-steps strong,

.footer-logo {

  color: #111111;

}

.landing-body .landing-menu a:hover {

  color: #166534;

}

.logo-symbol {

  background:

    radial-gradient(circle at 6px 6px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 14px 6px, #111111 0 3px, transparent 3.8px),

    radial-gradient(circle at 22px 6px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 6px 14px, #111111 0 3px, transparent 3.8px),

    radial-gradient(circle at 14px 14px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 22px 14px, #111111 0 3px, transparent 3.8px),

    radial-gradient(circle at 6px 22px, #16a34a 0 3px, transparent 3.8px),

    radial-gradient(circle at 14px 22px, #111111 0 3px, transparent 3.8px),

    radial-gradient(circle at 22px 22px, #16a34a 0 3px, transparent 3.8px) !important;

}

.saas-hero .landing-copy,

.landing-body .section-copy p,

.landing-body .how-section p,

.landing-body .solution-grid p,

.platform-flow p,

.landing-body > .landing-footer p,

.footer-columns a,

.footer-columns span {

  color: #555555;

}

.landing-body .btn.secondary {

  color: #111111 !important;

  border-color: #cbd8cd;

  background: #ffffff !important;

}

.platform-flow article,

.landing-body .solution-grid article,

.landing-body .how-steps article,

.footer-columns div,

.footer-bottom span {

  border-color: #dfe7df;

  background: #ffffff;

}

.landing-body .solution-grid article img {

  border-bottom-color: #dfe7df;

}

.footer-bottom {

  border-top-color: #dfe7df;

  color: #666666;

}







/* ─── KISMART professional brand system ─── */

.ks-site, .ks-auth, .ks-dash {

  margin: 0;

  color: #14201a;

  background: #f4f7f5;

  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

}

.ks-wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.ks-kicker {

  margin: 0 0 10px;

  color: #0d6b45;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

}

.ks-kicker.light { color: #9fd4b8; }

.ks-logo {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #14201a;

  font-size: 18px;

  font-weight: 750;

  text-decoration: none;

}

.ks-logo.light { color: #ffffff; }

.ks-mark {

  width: 28px;

  height: 28px;

  border-radius: 6px;

  background: #0d6b45;

  box-shadow: inset 0 0 0 2px #0d6b45;

  position: relative;

}

.ks-mark::after {

  content: "";

  position: absolute;

  inset: 7px;

  border: 2px solid #ffffff;

  border-radius: 2px;

}

.ks-mark.light { background: #159a5f; }

.ks-mark-img {

  width: 28px;

  height: 28px;

  flex: 0 0 28px;

  border-radius: 6px;

  object-fit: cover;

  display: block;

  background: #ffffff;

  box-shadow: 0 0 0 1px rgba(13, 107, 69, .2);

}

.brand-logo-img {

  width: 28px;

  height: 28px;

  flex: 0 0 28px;

  border-radius: 7px;

  object-fit: cover;

  display: block;

  background: #ffffff;

  box-shadow: 0 0 0 1px rgba(22, 163, 74, .35);

}

.ks-dash .brand-logo-img {

  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);

}

.ks-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 42px;

  padding: 0 16px;

  border-radius: 8px;

  border: 1px solid transparent;

  font-size: 14px;

  font-weight: 650;

  text-decoration: none;

  cursor: pointer;

}

.ks-btn-primary { color: #ffffff; background: #0d6b45; border-color: #0d6b45; }

.ks-btn-primary:hover { background: #0b5a3a; }

.ks-btn-ghost { color: #14201a; background: #ffffff; border-color: #c9d6ce; }

.ks-btn-ghost:hover { border-color: #0d6b45; }

.ks-btn-on-dark { color: #0d1f17; background: #ffffff; border-color: #ffffff; }

.ks-btn-outline-light { color: #ffffff; background: transparent; border-color: rgba(255,255,255,.45); }

.ks-btn-block { width: 100%; }

.ks-link { color: #2f4038; font-size: 14px; font-weight: 600; text-decoration: none; }

.ks-link:hover { color: #0d6b45; }



/* Top bar */

.ks-topbar {

  position: sticky;

  top: 0;

  z-index: 40;

  background: #ffffff;

  border-bottom: 1px solid #d5e0d9;

}

.ks-topbar-inner {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 20px;

  min-height: 68px;

}

.ks-nav { display: flex; justify-content: center; gap: 22px; }

.ks-nav a { color: #42574c; font-size: 14px; font-weight: 600; text-decoration: none; }

.ks-nav a:hover { color: #0d6b45; }

.ks-top-actions { display: flex; align-items: center; gap: 12px; }



/* Hero */

.ks-hero {

  background: #ffffff;

  border-bottom: 1px solid #d5e0d9;

}

.ks-hero-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);

  gap: 40px;

  align-items: center;

  padding: 56px 0 52px;

}

.ks-hero h1 {

  margin: 0;

  max-width: 560px;

  color: #14201a;

  font-size: clamp(32px, 4.2vw, 44px);

  line-height: 1.15;

  font-weight: 750;

  letter-spacing: -.02em;

}

.ks-lead {

  margin: 16px 0 0;

  max-width: 520px;

  color: #5a6b62;

  font-size: 16px;

  line-height: 1.6;

}

.ks-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.ks-hero-facts {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin: 28px 0 0;

}

.ks-hero-facts div {

  padding: 12px 14px;

  border: 1px solid #d5e0d9;

  border-radius: 10px;

  background: #f4f7f5;

}

.ks-hero-facts dt {

  color: #5a6b62;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .04em;

}

.ks-hero-facts dd {

  margin: 6px 0 0;

  color: #14201a;

  font-size: 13px;

  font-weight: 650;

}

.ks-hero-card {

  padding: 18px;

  border: 1px solid #d5e0d9;

  border-radius: 14px;

  background: #ffffff;

  box-shadow: 0 12px 30px rgba(13, 31, 23, .06);

}

.ks-card-head {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 12px;

  padding-bottom: 12px;

  border-bottom: 1px solid #e4ece7;

}

.ks-card-head span { color: #0d6b45; font-size: 11px; font-weight: 700; text-transform: uppercase; }

.ks-card-head strong { color: #14201a; font-size: 14px; }

.ks-stat-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin: 14px 0;

}

.ks-stat {

  padding: 12px;

  border: 1px solid #e4ece7;

  border-radius: 10px;

  background: #f8fbf9;

}

.ks-stat span { display: block; color: #5a6b62; font-size: 11px; font-weight: 600; }

.ks-stat strong { display: block; margin-top: 8px; color: #14201a; font-size: 18px; }

.ks-task-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e4ece7; border-radius: 10px; overflow: hidden; }

.ks-task-list li {

  display: grid;

  grid-template-columns: 1fr auto auto;

  gap: 10px;

  align-items: center;

  padding: 12px 14px;

  border-top: 1px solid #eef3f0;

}

.ks-task-list li:first-child { border-top: 0; }

.ks-task-list strong { color: #14201a; font-size: 13px; }

.ks-task-list span { color: #5a6b62; font-size: 12px; }

.ks-task-list em {

  min-width: 54px;

  padding: 4px 8px;

  border-radius: 999px;

  background: #e7f3ed;

  color: #0d6b45;

  font-size: 11px;

  font-style: normal;

  font-weight: 700;

  text-align: center;

}



/* Band */

.ks-band { background: #eef3f0; border-bottom: 1px solid #d5e0d9; }

.ks-band-inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 14px 18px;

  padding: 18px 0;

}

.ks-band-inner > p {

  margin: 0;

  color: #5a6b62;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .05em;

}

.ks-band-inner ul {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 0;

  padding: 0;

  list-style: none;

}

.ks-band-inner li {

  padding: 7px 12px;

  border: 1px solid #d5e0d9;

  border-radius: 999px;

  background: #ffffff;

  color: #2f4038;

  font-size: 13px;

  font-weight: 600;

}



/* Sections */

.ks-section { padding: 64px 0; background: #ffffff; }

.ks-section-alt { background: #f4f7f5; border-top: 1px solid #d5e0d9; border-bottom: 1px solid #d5e0d9; }

.ks-section-head { max-width: 640px; margin-bottom: 28px; }

.ks-section-head.tight { margin-bottom: 0; }

.ks-section-head h2 {

  margin: 0 0 10px;

  color: #14201a;

  font-size: clamp(24px, 3vw, 32px);

  line-height: 1.2;

  font-weight: 750;

  letter-spacing: -.015em;

}

.ks-section-head p:not(.ks-kicker) { margin: 0; color: #5a6b62; font-size: 15px; line-height: 1.55; }

.ks-quad, .ks-features, .ks-security {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

}

.ks-features, .ks-security { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ks-quad article, .ks-features article, .ks-security article {

  padding: 20px;

  border: 1px solid #d5e0d9;

  border-radius: 12px;

  background: #ffffff;

}

.ks-features article {

  padding: 0;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}

.ks-features article img {

  display: block;

  width: 100%;

  height: 168px;

  object-fit: cover;

  border-bottom: 1px solid #d5e0d9;

  background: #eef3f0;

}

.ks-feature-body { padding: 18px 20px 20px; }

.ks-section-alt .ks-quad article,

.ks-section-alt .ks-features article,

.ks-section-alt .ks-security article { background: #ffffff; }

.ks-num {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 8px;

  background: #e7f3ed;

  color: #0d6b45;

  font-size: 12px;

  font-weight: 750;

}

.ks-quad h3, .ks-features h3, .ks-security h3 {

  margin: 14px 0 8px;

  color: #14201a;

  font-size: 16px;

  font-weight: 700;

}

.ks-quad p, .ks-features p, .ks-security p {

  margin: 0;

  color: #5a6b62;

  font-size: 14px;

  line-height: 1.5;

}

.ks-tag {

  margin: 0 0 8px !important;

  color: #0d6b45 !important;

  font-size: 11px !important;

  font-weight: 750 !important;

  letter-spacing: .05em;

  text-transform: uppercase;

}

.ks-split {

  display: grid;

  grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);

  gap: 36px;

  align-items: start;

}

.ks-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: step; }

.ks-steps li {

  position: relative;

  padding: 18px 18px 18px 62px;

  border: 1px solid #d5e0d9;

  border-radius: 12px;

  background: #ffffff;

  counter-increment: step;

}

.ks-steps li::before {

  content: counter(step);

  position: absolute;

  left: 16px;

  top: 18px;

  width: 30px;

  height: 30px;

  border-radius: 8px;

  display: grid;

  place-items: center;

  background: #0d6b45;

  color: #ffffff;

  font-size: 13px;

  font-weight: 750;

}

.ks-steps strong { display: block; color: #14201a; font-size: 15px; }

.ks-steps p { margin: 6px 0 0; color: #5a6b62; font-size: 14px; line-height: 1.5; }



/* CTA + footer */

.ks-cta {

  background: #0d1f17;

  color: #ffffff;

  padding: 56px 0;

}

.ks-cta-inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 24px;

}

.ks-cta h2 {

  margin: 0 0 8px;

  max-width: 520px;

  color: #ffffff;

  font-size: clamp(24px, 3vw, 32px);

  line-height: 1.2;

}

.ks-cta p:not(.ks-kicker) { margin: 0; max-width: 520px; color: #b7c9be; font-size: 15px; line-height: 1.5; }

.ks-footer {

  background: #ffffff;

  border-top: 1px solid #d5e0d9;

  padding: 36px 0 24px;

}

.ks-footer-grid {

  display: grid;

  grid-template-columns: 1.4fr .8fr .8fr;

  gap: 28px;

}

.ks-footer p { margin: 12px 0 0; max-width: 340px; color: #5a6b62; font-size: 14px; line-height: 1.5; }

.ks-footer strong {

  display: block;

  margin-bottom: 10px;

  color: #14201a;

  font-size: 12px;

  font-weight: 750;

  letter-spacing: .05em;

  text-transform: uppercase;

}

.ks-footer a, .ks-footer span {

  display: block;

  margin-top: 8px;

  color: #5a6b62;

  font-size: 14px;

  text-decoration: none;

}

.ks-footer a:hover { color: #0d6b45; }

.ks-footer-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 24px;

  padding-top: 16px;

  border-top: 1px solid #e4ece7;

  color: #6b7c73;

  font-size: 12px;

}



/* Auth */

.ks-auth { min-height: 100vh; background: #f4f7f5; }

.ks-auth-shell {

  min-height: 100vh;

  display: grid;

  grid-template-columns: minmax(280px, .95fr) minmax(340px, 1.05fr);

}

.ks-auth-brand {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 14px;

  padding: 48px clamp(28px, 5vw, 64px);

  background: #0d1f17;

  color: #ffffff;

}

.ks-auth-brand h1 {

  margin: 18px 0 0;

  max-width: 380px;

  font-size: clamp(28px, 3.5vw, 36px);

  line-height: 1.15;

  font-weight: 750;

}

.ks-auth-brand > p { margin: 0; max-width: 360px; color: #b7c9be; font-size: 15px; line-height: 1.55; }

.ks-auth-brand ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.ks-auth-brand li {

  position: relative;

  padding-left: 18px;

  color: #d7e6dd;

  font-size: 14px;

}

.ks-auth-brand li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 8px;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #159a5f;

}

.ks-auth-main {

  display: grid;

  place-items: center;

  padding: 40px 20px;

}

.ks-auth-card {

  width: min(420px, 100%);

  padding: 28px;

  border: 1px solid #d5e0d9;

  border-radius: 14px;

  background: #ffffff;

  box-shadow: 0 10px 28px rgba(13, 31, 23, .05);

}

.ks-auth-card h2 { margin: 0 0 6px; font-size: 24px; color: #14201a; }

.ks-auth-sub { margin: 0 0 18px; color: #5a6b62; font-size: 14px; line-height: 1.5; }

.ks-form { display: grid; gap: 12px; }

.ks-form label { display: grid; gap: 6px; color: #2f4038; font-size: 12px; font-weight: 700; }

.ks-form input, .ks-form select, .ks-form textarea {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  min-height: 42px;

  padding: 10px 12px;

  border: 1px solid #c9d6ce;

  border-radius: 8px;

  background: #ffffff;

  color: #14201a;

  font: inherit;

  outline: none;

}

.ks-form textarea { min-height: 96px; resize: vertical; }

.ks-form input:focus, .ks-form select:focus, .ks-form textarea:focus {

  border-color: #0d6b45;

  box-shadow: 0 0 0 3px rgba(13, 107, 69, .12);

}

.ks-alert {

  padding: 11px 12px;

  border: 1px solid #9b2c2c;

  border-radius: 8px;

  background: #fdecec;

  color: #7a1f1f;

  font-size: 13px;

}

.ks-alert.ok {

  border-color: #0d6b45;

  background: #e7f3ed;

  color: #0b5a3a;

}

.ks-auth-demo, .ks-auth-meta { margin: 14px 0 0; color: #6b7c73; font-size: 12px; line-height: 1.45; }

.ks-auth-foot { margin: 16px 0 0; text-align: center; }

.ks-auth-foot a { color: #5a6b62; font-size: 13px; text-decoration: none; }

.ks-auth-foot a:hover { color: #0d6b45; }



/* Intake */

.ks-intake-page { overflow-x: hidden; }

.ks-intake { padding: 48px 0 64px; }

.ks-intake-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: 32px;

  align-items: start;

  max-width: 620px;

}

.ks-intake-copy h1 {

  margin: 0 0 12px;

  color: #14201a;

  font-size: clamp(28px, 4vw, 40px);

  line-height: 1.15;

}

.ks-intake-copy p:not(.ks-kicker) { margin: 0; color: #5a6b62; font-size: 15px; line-height: 1.55; max-width: 420px; }

.ks-intake-form {

  min-width: 0;

  width: 100%;

  padding: 22px;

  border: 1px solid #d5e0d9;

  border-radius: 14px;

  background: #ffffff;

  box-shadow: 0 10px 28px rgba(13, 31, 23, .05);

}

.ks-full { grid-column: 1 / -1; }



/* Dashboard overrides (shell still uses existing class names from app.js) */

.ks-dash { background: #f4f7f5; color: #14201a; font-family: "Segoe UI", system-ui, Arial, sans-serif; }

.ks-dash .shell { min-height: 100vh; }

.ks-dash aside {

  background: #0d1f17 !important;

  color: #ffffff !important;

  border-right: 1px solid #0a1711 !important;

}

.ks-dash .brand { border-bottom-color: rgba(255,255,255,.1) !important; }

.ks-dash .brand-word { color: #ffffff !important; font-weight: 750 !important; }

.ks-dash .brand span { color: #a8c0b3 !important; }

.ks-dash .brand-logo {

  border: 0 !important;

  border-radius: 7px !important;

  background: #0d6b45 !important;

}

.ks-dash .brand-logo::before {

  background: #ffffff !important;

  box-shadow: 8px 0 rgba(255,255,255,.55), 16px 0 #ffffff, 0 8px rgba(255,255,255,.55), 8px 8px #ffffff, 16px 8px rgba(255,255,255,.55), 0 16px #ffffff, 8px 16px rgba(255,255,255,.55), 16px 16px #ffffff !important;

}

.ks-dash nav button {

  color: #c5d6cc !important;

  border-radius: 8px !important;

  font-weight: 550 !important;

}

.ks-dash nav button.active,

.ks-dash nav button:hover {

  color: #ffffff !important;

  background: rgba(13, 107, 69, .28) !important;

}

.ks-dash nav button.active::before,

.ks-dash nav button:hover::before { background: #159a5f !important; }

.ks-dash nav button.active .nav-icon,

.ks-dash nav button:hover .nav-icon { color: #7dcea6 !important; }

.ks-dash .side-status { border-top-color: rgba(255,255,255,.1) !important; }

.ks-dash .side-status strong { color: #ffffff !important; }

.ks-dash .side-status small { color: #a8c0b3 !important; }

.ks-dash .pulse { background: #159a5f !important; box-shadow: 0 0 0 4px rgba(21, 154, 95, .2) !important; }

.ks-dash main { background: #f4f7f5 !important; padding: 22px 26px 36px !important; }

.ks-dash .dash-header {

  border-bottom: 1px solid #d5e0d9 !important;

  margin-bottom: 18px !important;

  padding-bottom: 14px !important;

}

.ks-dash .doc-tools {

  display: flex;

  flex-wrap: wrap;

  gap: 12px 16px;

  align-items: end;

  padding: 4px 2px 8px;

}

.ks-dash .doc-tools label {

  display: grid;

  gap: 6px;

  min-width: 150px;

  color: #5a6b62;

  font-size: 12px;

  font-weight: 650;

}

.ks-dash .doc-tools input[type="date"] {

  min-height: 42px;

  padding: 0 12px;

  border: 1px solid #c9d6ce;

  border-radius: 8px;

  background: #fff;

  color: #14201a;

  font: inherit;

}

.ks-dash .doc-tools .actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ks-dash a.tiny {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 30px;

  padding: 0 10px;

  border-radius: 999px;

  border: 1px solid #c9d6ce;

  background: #fff;

  color: #14201a;

  font-size: 12px;

  font-weight: 650;

  text-decoration: none;

}

.ks-dash a.tiny:hover { border-color: #0d6b45; color: #0d6b45; }

.ks-dash .form-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px 14px;

}

.ks-dash .form-grid label { display: grid; gap: 6px; }

@media (max-width: 720px) {

  .ks-dash .form-grid { grid-template-columns: 1fr; }

}

.ks-dash h1 { color: #14201a !important; font-weight: 750 !important; }

.ks-dash .eyebrow { color: #0d6b45 !important; font-weight: 700 !important; letter-spacing: .05em !important; }

.ks-dash .controls input,

.ks-dash .controls select {

  border: 1px solid #c9d6ce !important;

  border-radius: 8px !important;

  background: #ffffff !important;

  color: #14201a !important;

  box-shadow: none !important;

}

.ks-dash .controls input:focus,

.ks-dash .controls select:focus {

  border-color: #0d6b45 !important;

  box-shadow: 0 0 0 3px rgba(13, 107, 69, .12) !important;

}

.ks-dash .btn {

  border-radius: 8px !important;

  border: 1px solid #0d6b45 !important;

  background: #0d6b45 !important;

  color: #ffffff !important;

  font-weight: 650 !important;

  box-shadow: none !important;

}

.ks-dash .btn.secondary {

  background: #ffffff !important;

  color: #14201a !important;

  border-color: #c9d6ce !important;

}

.ks-dash .btn.signout-btn {

  background: #ffffff !important;

  color: #9b2c2c !important;

  border-color: #e8b4b4 !important;

}

.ks-dash .panel,

.ks-dash .metric,

.ks-dash .chart-panel {

  border: 1px solid #d5e0d9 !important;

  border-radius: 12px !important;

  background: #ffffff !important;

  box-shadow: 0 6px 18px rgba(13, 31, 23, .04) !important;

}

.ks-dash .health-panel {

  background: #0d1f17 !important;

  border-color: #0d1f17 !important;

  color: #ffffff !important;

  border-radius: 12px !important;

  box-shadow: none !important;

}

.ks-dash .health-copy .eyebrow,

.ks-dash .health-copy p,

.ks-dash .health-strip span { color: #a8c0b3 !important; }

.ks-dash .health-copy strong,

.ks-dash .health-strip strong { color: #ffffff !important; }

.ks-dash .health-score {

  border: 1px solid rgba(21, 154, 95, .45) !important;

  color: #7dcea6 !important;

  border-radius: 10px !important;

}

.ks-dash .health-strip { border-top-color: rgba(255,255,255,.1) !important; }

.ks-dash tbody tr:hover td { background: #f0f8f4 !important; }

.ks-dash th { background: #eef3f0 !important; color: #5a6b62 !important; }

.ks-dash .badge {

  border-radius: 999px !important;

  font-weight: 650 !important;

}

.ks-dash .badge.Active,

.ks-dash .badge.Pending,

.ks-dash .badge.Live {

  color: #14201a !important;

  background: #eef3f0 !important;

  border: 1px solid #d5e0d9 !important;

}

.ks-dash .badge.Completed,

.ks-dash .badge.Synced,

.ks-dash .badge.Ready,

.ks-dash .badge.Online {

  color: #0b5a3a !important;

  background: #e7f3ed !important;

  border: 1px solid #b7dfc9 !important;

}

.ks-dash .badge.Overdue,

.ks-dash .badge.Attention {

  color: #0b5a3a !important;

  background: #e7f3ed !important;

  border: 1px solid #0d6b45 !important;

}

.ks-dash .badge.Restricted,

.ks-dash .badge.Failed,

.ks-dash .badge.Blocked,

.ks-dash .badge.Offline {

  color: #ffffff !important;

  background: #14201a !important;

  border: 1px solid #14201a !important;

}

.ks-dash .tiny {

  border-radius: 7px !important;

  border-color: #c9d6ce !important;

  background: #ffffff !important;

  color: #14201a !important;

}

.ks-dash .tiny.success,

.ks-dash .tiny[data-action="remind"],

.ks-dash .tiny[data-action="warn"] {

  background: #0d6b45 !important;

  border-color: #0d6b45 !important;

  color: #ffffff !important;

}

.ks-dash .tiny.danger,

.ks-dash .tiny[data-action="restrict"] {

  background: #14201a !important;

  border-color: #14201a !important;

  color: #ffffff !important;

}

.ks-dash .tiny.locked,

.ks-dash .tiny.locked:disabled {

  color: #6f7a75 !important;

  background: #dfe4e1 !important;

  border-color: #c6cfca !important;

  cursor: not-allowed;

  opacity: 1;

}

.ks-dash .tiny.delete {

  background: #ffffff !important;

  border-color: #e8b4b4 !important;

  color: #9b2c2c !important;

}

.ks-dash .metric.green strong,

.ks-dash .metric.accent strong,

.ks-dash .metric.blue strong { color: #0d6b45 !important; }

.ks-dash .metric.red strong { color: #9b2c2c !important; }

.ks-dash .metric::after { background: #0d6b45 !important; opacity: .55 !important; }

.ks-dash .bar-fill,

.ks-dash .pipeline-fill { background: #0d6b45 !important; }

.ks-dash .chart-blue,

.ks-dash .chart-teal,

.ks-dash .chart-accent,

.ks-dash .chart-green { fill: #0d6b45 !important; stroke: #0d6b45 !important; }

.ks-dash .chart-red { fill: #9b2c2c !important; stroke: #9b2c2c !important; }

.ks-dash .toast { border-radius: 10px !important; background: #0d1f17 !important; }



@media (max-width: 960px) {

  .ks-hero-grid,

  .ks-split,

  .ks-auth-shell,

  .ks-cta-inner,

  .ks-footer-grid { grid-template-columns: 1fr !important; }

  .ks-quad { grid-template-columns: 1fr 1fr !important; }

  .ks-auth-brand { min-height: auto; padding-top: 36px; padding-bottom: 36px; }

}

@media (max-width: 720px) {

  .ks-nav { display: none !important; }

  .ks-topbar-inner { grid-template-columns: auto auto !important; }

  .ks-hero-facts,

  .ks-stat-row,

  .ks-quad,

  .ks-features,

  .ks-security { grid-template-columns: 1fr !important; }

  .ks-task-list li { grid-template-columns: 1fr auto !important; }

  .ks-task-list span { display: none; }

  .ks-wrap { width: min(100% - 28px, 1120px); }

}



/* ═══════════════════════════════════════════════════════════

   KISMART landing — clean solid layout (ks-land)

   ═══════════════════════════════════════════════════════════ */

.ks-land {

  margin: 0;

  color: #e8f0eb;

  background: #0a0a0a;

  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

}

.ks-land * { box-sizing: border-box; }

.lp-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }



/* ─── Clean iPhone-style UI — white, hairline, precise ─── */

.sl-land {

  margin: 0;

  color: #1d1d1f;

  background: #ffffff;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

  -webkit-font-smoothing: antialiased;

}

.sl-land, .sl-land * { box-sizing: border-box; }

.sl-land a { text-decoration: none; color: inherit; }

.sl-shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }



/* Nav — frosted white */

.sl-nav {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(255, 255, 255, .8);

  backdrop-filter: saturate(180%) blur(20px);

  -webkit-backdrop-filter: saturate(180%) blur(20px);

  border-bottom: 1px solid rgba(0, 0, 0, .08);

}

.sl-nav-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  min-height: 56px;

}

.sl-brand { display: inline-flex; align-items: center; gap: 9px; color: #1d1d1f; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

.sl-brand img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }

.sl-links { display: flex; gap: 30px; }

.sl-links a { color: #515154; font-size: 14px; font-weight: 500; transition: color .16s ease; }

.sl-links a:hover { color: #1d1d1f; }

.sl-nav-cta { display: flex; align-items: center; gap: 18px; }

.sl-link-quiet { color: #515154; font-size: 14px; font-weight: 500; }

.sl-link-quiet:hover { color: #1d1d1f; }



/* Pill buttons */

.sl-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 40px;

  padding: 0 20px;

  border-radius: 980px;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: -.01em;

  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;

}

.sl-pill-lg { min-height: 48px; padding: 0 26px; font-size: 15px; }

.sl-pill-dark {

  color: #1d1d1f;

  background: rgba(0, 0, 0, .05);

}

.sl-pill-dark:hover { background: rgba(0, 0, 0, .09); }

.sl-pill-green {

  color: #ffffff;

  background: #0d6b45;

  box-shadow: 0 8px 20px rgba(13, 107, 69, .26);

}

.sl-pill-green:hover { background: #0b5a3a; transform: translateY(-1px); }

.sl-pill-clay {

  color: #1d1d1f;

  background: rgba(0, 0, 0, .05);

}

.sl-pill-clay:hover { background: rgba(0, 0, 0, .09); }

.sl-pill-white-ghost {

  color: #1d1d1f;

  background: #ffffff;

  border: 1px solid #d2d2d7;

}

.sl-pill-white-ghost:hover { background: #f5f5f7; }



/* Hero — phones image fills the section, words on top */

.sl-hero {

  position: relative;

  padding: 96px 0 84px;

  text-align: center;

  color: #ffffff;

  background: url('/assets/hero-phones.webp') center 62% / cover no-repeat, #0c0c0e;

}

.sl-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(5, 5, 7, .45);

}

.sl-hero-inner { position: relative; z-index: 1; }

.sl-hero .sl-eyebrow {

  background: rgba(255, 255, 255, .1);

  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, .18);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}

.sl-hero .sl-hero-chips li {

  background: rgba(255, 255, 255, .08);

  border-color: rgba(255, 255, 255, .16);

  color: #f2f2f4;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}

.sl-hero .sl-pill-clay {

  color: #ffffff;

  background: rgba(255, 255, 255, .12);

  border: 1px solid rgba(255, 255, 255, .22);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}

.sl-hero .sl-pill-clay:hover { background: rgba(255, 255, 255, .2); }

.sl-eyebrow {

  display: inline-flex;

  align-items: center;

  margin: 0 0 20px;

  padding: 7px 16px;

  border-radius: 999px;

  background: #eaf4ee;

  color: #0d6b45;

  font-size: 13px;

  font-weight: 650;

  letter-spacing: .01em;

}

.sl-hero h1 {

  margin: 0 auto;

  max-width: 880px;

  color: #ffffff;

  font-size: clamp(40px, 5.8vw, 64px);

  line-height: 1.04;

  font-weight: 700;

  letter-spacing: -.035em;

  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);

}

.sl-hero h1 span { color: #6ee7a0; }

.sl-hero-sub {

  margin: 20px auto 0;

  max-width: 640px;

  color: rgba(255, 255, 255, .84);

  font-size: 18px;

  line-height: 1.55;

  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);

}

.sl-hero-actions {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 32px;

}

.sl-hero-chips {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  margin: 32px 0 0;

  padding: 0;

  list-style: none;

}

.sl-hero-chips li {

  padding: 8px 15px;

  border: 1px solid #e8e8ed;

  border-radius: 999px;

  color: #515154;

  background: #ffffff;

  font-size: 13px;

  font-weight: 500;

}

.sl-hero-shot {

  margin: 60px auto 0;

  border-radius: 24px;

  overflow: hidden;

  border: 1px solid #e8e8ed;

  box-shadow: 0 30px 60px rgba(0, 0, 0, .1);

}

.sl-hero-shot img { display: block; width: 100%; height: auto; }



/* Sections */

.sl-section { padding: 88px 0; }

.sl-section-alt {

  background: #f5f5f7;

  border-top: 1px solid #e8e8ed;

  border-bottom: 1px solid #e8e8ed;

}

.sl-section-head {

  max-width: 660px;

  margin: 0 auto 52px;

  text-align: center;

}

.sl-section-head h2 {

  margin: 0 0 14px;

  color: #1d1d1f;

  font-size: clamp(30px, 4vw, 44px);

  line-height: 1.08;

  font-weight: 700;

  letter-spacing: -.03em;

}

.sl-section-head p { margin: 0; color: #6e6e73; font-size: 18px; line-height: 1.55; }



/* Feature cards — white with hairline borders */

.sl-cards {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;

}

.sl-card {

  padding: 28px 24px;

  background: #ffffff;

  border: 1px solid #e8e8ed;

  border-radius: 18px;

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

}

.sl-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 20px 44px rgba(0, 0, 0, .08);

  border-color: #d2d2d7;

}

.sl-card-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 44px;

  height: 44px;

  margin-bottom: 18px;

  border-radius: 12px;

  background: #eaf4ee;

  color: #0d6b45;

}

.sl-card-icon svg { width: 22px; height: 22px; }

.sl-card h3 { margin: 0 0 8px; color: #1d1d1f; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }

.sl-card p { margin: 0; color: #6e6e73; font-size: 14px; line-height: 1.55; }



/* Steps — big light numerals */

.sl-steps {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;

}

.sl-step {

  padding: 26px 24px;

  background: #ffffff;

  border: 1px solid #e8e8ed;

  border-radius: 18px;

  transition: transform .2s ease, box-shadow .2s ease;

}

.sl-step:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .08); }

.sl-step-num {

  display: block;

  margin-bottom: 18px;

  color: #d2d2d7;

  font-size: 44px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: -.04em;

}

.sl-step h3 { margin: 0 0 8px; color: #1d1d1f; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }

.sl-step p { margin: 0; color: #6e6e73; font-size: 14px; line-height: 1.55; }



/* CTA */

.sl-cta { padding: 88px 0; text-align: center; }

.sl-cta h2 {

  margin: 0 0 14px;

  color: #1d1d1f;

  font-size: clamp(32px, 4.4vw, 48px);

  line-height: 1.08;

  font-weight: 700;

  letter-spacing: -.03em;

}

.sl-cta p { margin: 0 0 32px; color: #6e6e73; font-size: 18px; line-height: 1.5; }



/* Footer */

.sl-footer {

  padding: 34px 0 40px;

  background: #fafafa;

  border-top: 1px solid #f0f0f2;

}

.sl-footer-inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}

.sl-footer p { margin: 0; color: #86868b; font-size: 13px; }

.sl-footer-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.sl-footer-links a,

.sl-footer-links span { color: #86868b; font-size: 13px; font-weight: 500; }

.sl-footer-links a:hover { color: #1d1d1f; }



/* Auth — clean white card on light gray */

.sl-auth {

  min-height: 100vh;

  margin: 0;

  display: grid;

  place-items: center;

  padding: 32px 20px;

  color: #1d1d1f;

  background: #f5f5f7;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

  -webkit-font-smoothing: antialiased;

}

.sl-auth, .sl-auth * { box-sizing: border-box; }

.sl-auth a { text-decoration: none; }

.sl-auth-shell {

  width: 100%;

  display: grid;

  justify-items: center;

}

.sl-auth-card {

  width: min(420px, 100%);

  padding: 40px 36px 30px;

  border-radius: 22px;

  background: #ffffff;

  border: 1px solid #e8e8ed;

  box-shadow: 0 20px 44px rgba(0, 0, 0, .07);

  text-align: center;

}

.sl-auth-brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 26px;

  color: #1d1d1f;

  font-size: 17px;

  font-weight: 700;

  letter-spacing: -.01em;

}

.sl-auth-brand img {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  object-fit: cover;

}

.sl-auth-kicker {

  margin: 0 0 8px;

  color: #0d6b45;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

}

.sl-auth-card h1 {

  margin: 0 0 8px;

  color: #1d1d1f;

  font-size: 28px;

  font-weight: 700;

  letter-spacing: -.03em;

}

.sl-auth-sub {

  margin: 0 0 26px;

  color: #6e6e73;

  font-size: 14.5px;

  line-height: 1.55;

}

.sl-auth-form {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 16px;

  text-align: left;

}

.sl-auth-form > * { width: 100%; }

.sl-auth-form label {

  display: grid;

  gap: 7px;

  color: #1d1d1f;

  font-size: 13px;

  font-weight: 600;

}

.sl-auth-form input {

  width: 100%;

  min-height: 48px;

  padding: 0 16px;

  border: 1px solid #d2d2d7;

  border-radius: 12px;

  background: #ffffff;

  color: #1d1d1f;

  font: inherit;

  font-size: 15px;

  outline: none;

  transition: border-color .16s ease, box-shadow .16s ease;

}

.sl-auth-form input::placeholder { color: #a1a1a6; }

.sl-auth-form input:focus {

  border-color: #0d6b45;

  box-shadow: 0 0 0 4px rgba(13, 107, 69, .14);

}

.sl-auth-btn {

  width: 100%;

  min-height: 50px;

  margin-top: 8px;

  border: 0;

  border-radius: 999px;

  background: #0d6b45;

  color: #ffffff;

  font: inherit;

  font-size: 15px;

  font-weight: 650;

  letter-spacing: -.01em;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(13, 107, 69, .26);

  transition: background .16s ease, transform .12s ease;

}

.sl-auth-btn:hover { background: #0b5a3a; }

.sl-auth-btn:active { transform: translateY(1px); }

.sl-auth-error {

  padding: 12px 15px;

  border-radius: 12px;

  background: #fdf1ef;

  border: 1px solid #f3c5bc;

  color: #a13a2a;

  font-size: 13px;

  font-weight: 600;

  line-height: 1.45;

}

.sl-auth-demo {

  margin: 22px 0 0;

  padding: 11px 14px;

  border-radius: 12px;

  background: #f5f5f7;

  color: #6e6e73;

  font-size: 12.5px;

  font-weight: 550;

}

.sl-auth-meta { margin: 14px 0 0; color: #a1a1a6; font-size: 12px; }

.sl-auth-foot { margin-top: 20px; }

.sl-auth-foot a {

  color: #515154;

  font-size: 13.5px;

  font-weight: 600;

  transition: color .16s ease;

}

.sl-auth-foot a:hover { color: #1d1d1f; }



@media (max-width: 960px) {

  .sl-links { display: none; }

  .sl-cards,

  .sl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 620px) {

  .sl-shell { width: min(100% - 28px, 1080px); }

  .sl-link-quiet { display: none; }

  .sl-cards,

  .sl-steps { grid-template-columns: 1fr; }

  .sl-hero { padding: 72px 0 64px; }

  .sl-section { padding: 64px 0; }

  .sl-cta { padding: 64px 0; }

}



/* KISMART landing redesign: editorial green on midnight, with a live operations preview. */

.sl2-land { --sl2-ink: #07110d; --sl2-green: #8df0ad; --sl2-green-strong: #35c96a; --sl2-mint: #dffbe9; --sl2-line: rgba(7,17,13,.14); margin: 0; color: var(--sl2-ink); background: #f5f7f4; font-family: "Outfit", Inter, "Segoe UI", Arial, sans-serif; }

.sl2-land *, .sl2-land *::before, .sl2-land *::after { box-sizing: border-box; }

.sl2-land a { text-decoration: none; }

.sl2-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.sl2-nav { position: relative; z-index: 10; background: var(--sl2-ink); color: #fff; }

.sl2-nav-inner { min-height: 78px; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }

.sl2-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }

.sl2-mark { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: var(--sl2-green); }

.sl2-mark img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

.sl2-brand-dot { color: var(--sl2-green); }

.sl2-links { display: flex; justify-content: center; gap: 34px; }

.sl2-links a, .sl2-text-link { color: rgba(255,255,255,.68); font-size: 13px; font-weight: 600; transition: color .2s ease; }

.sl2-links a:hover, .sl2-text-link:hover { color: #fff; }

.sl2-nav-actions { display: flex; align-items: center; gap: 22px; }

.sl2-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 19px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 750; transition: transform .2s ease, background .2s ease, border-color .2s ease; }

.sl2-button:hover { transform: translateY(-2px); }

.sl2-button-dark { color: var(--sl2-ink); background: var(--sl2-green); }

.sl2-button-green { color: var(--sl2-ink); background: var(--sl2-green); box-shadow: 0 14px 28px rgba(53,201,106,.22); }

.sl2-button-outline { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }

.sl2-button-outline:hover { border-color: var(--sl2-green); background: rgba(141,240,173,.08); }

.sl2-button-lg { min-height: 52px; padding-inline: 24px; }

.sl2-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 68% 54%, rgba(53,201,106,.16), transparent 34%), var(--sl2-ink); }

.sl2-hero::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, #000, transparent 86%); }

.sl2-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr); align-items: center; gap: 54px; min-height: 690px; padding-top: 72px; padding-bottom: 78px; }

.sl2-hero-copy { max-width: 540px; }

.sl2-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--sl2-green); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.sl2-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sl2-green); box-shadow: 0 0 0 5px rgba(141,240,173,.12); }

.sl2-hero h1 { max-width: 570px; margin: 0; color: #fff; font-size: clamp(45px, 5.2vw, 72px); line-height: .99; font-weight: 760; letter-spacing: -.065em; }

.sl2-hero h1 em, .sl2-section-head h2 em, .sl2-workflow-copy h2 em, .sl2-cta h2 em { color: var(--sl2-green); font-style: normal; }

.sl2-lead { max-width: 490px; margin: 26px 0 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.65; }

.sl2-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.sl2-proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 505px; margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.17); }

.sl2-proof-row div { display: grid; gap: 7px; }

.sl2-proof-row strong { color: #fff; font-size: 15px; }

.sl2-proof-row span { color: rgba(255,255,255,.46); font-size: 11px; line-height: 1.35; }

.sl2-hero-visual { position: relative; min-height: 548px; display: grid; place-items: center; }

.sl2-dashboard { position: relative; z-index: 2; width: min(100%, 620px); padding: 18px; border: 1px solid rgba(141,240,173,.28); border-radius: 22px; background: linear-gradient(145deg, #17241d, #0b1510 66%); box-shadow: 0 32px 90px rgba(0,0,0,.42); transform: rotate(1.2deg); }

.sl2-dashboard-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.56); font-size: 11px; }

.sl2-dashboard-top span { display: flex; gap: 5px; margin-right: 5px; }.sl2-dashboard-top i { width: 7px; height: 7px; border-radius: 50%; background: #66746a; }.sl2-dashboard-top strong { color: #fff; font-size: 12px; }.sl2-dashboard-top b { margin-left: auto; padding: 5px 8px; border-radius: 99px; color: var(--sl2-ink); background: var(--sl2-green); font-size: 10px; text-transform: uppercase; }

.sl2-dashboard-intro { display: flex; align-items: end; justify-content: space-between; padding: 22px 4px 18px; }.sl2-dashboard-intro small { color: rgba(255,255,255,.4); font-size: 9px; letter-spacing: .1em; }.sl2-dashboard-intro h2 { margin: 7px 0 0; color: #fff; font-size: 20px; letter-spacing: -.035em; }.sl2-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(141,240,173,.4); border-radius: 50%; color: var(--sl2-green); font-size: 10px; font-weight: 800; }

.sl2-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.sl2-metrics > div { min-height: 103px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.045); }.sl2-metrics span, .sl2-metrics small { display: block; color: rgba(255,255,255,.48); font-size: 10px; }.sl2-metrics strong { display: block; margin: 15px 0 8px; color: #fff; font-size: 20px; letter-spacing: -.04em; }.sl2-metrics .sl2-up { color: var(--sl2-green); }.sl2-metric-alert { border-color: rgba(245,189,92,.32) !important; background: rgba(245,189,92,.07) !important; }.sl2-metric-alert strong { color: #f5bd5c; }.sl2-chart-card { margin-top: 10px; padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.035); }.sl2-chart-head { display: flex; justify-content: space-between; }.sl2-chart-head span, .sl2-chart-head strong { display: block; }.sl2-chart-head span { color: #fff; font-size: 12px; }.sl2-chart-head strong { margin-top: 5px; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 500; }.sl2-chart-head b { color: var(--sl2-green); font-size: 12px; }.sl2-chart { position: relative; height: 128px; margin-top: 10px; }.sl2-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }.sl2-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.1); }.sl2-gridline.one { top: 24%; }.sl2-gridline.two { top: 50%; }.sl2-gridline.three { top: 76%; }.sl2-activity { display: grid; margin-top: 10px; padding: 0 4px; }.sl2-activity > div { display: flex; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid rgba(255,255,255,.1); }.sl2-activity > div > div { display: grid; gap: 4px; }.sl2-activity strong { color: #fff; font-size: 11px; }.sl2-activity small { color: rgba(255,255,255,.4); font-size: 10px; }.sl2-activity b { margin-left: auto; color: var(--sl2-green); font-size: 11px; }.sl2-status { width: 8px; height: 8px; border-radius: 50%; }.sl2-status-green { background: var(--sl2-green); }.sl2-status-amber { background: #f5bd5c; }.sl2-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; min-width: 175px; padding: 12px; border: 1px solid rgba(141,240,173,.28); border-radius: 13px; color: #fff; background: rgba(19,35,26,.9); box-shadow: 0 16px 40px rgba(0,0,0,.3); backdrop-filter: blur(12px); }.sl2-float-top { top: 56px; right: -8px; }.sl2-float-bottom { bottom: 24px; left: -30px; }.sl2-float-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--sl2-ink); background: var(--sl2-green); font-weight: 800; }.sl2-float small { display: block; color: rgba(255,255,255,.46); font-size: 8px; letter-spacing: .08em; }.sl2-float strong { display: block; margin-top: 4px; font-size: 12px; }.sl2-orbit { position: absolute; border: 1px solid rgba(141,240,173,.18); border-radius: 50%; transform: rotate(-24deg); }.sl2-orbit-a { width: 680px; height: 310px; }.sl2-orbit-b { width: 500px; height: 240px; transform: rotate(32deg); border-color: rgba(255,255,255,.08); }

.sl2-trust { background: var(--sl2-green); color: var(--sl2-ink); }.sl2-trust-inner { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); align-items: center; gap: 26px; min-height: 92px; }.sl2-trust-inner > span { font-size: 10px; font-weight: 800; letter-spacing: .1em; }.sl2-trust-inner strong { padding-left: 20px; border-left: 1px solid rgba(7,17,13,.22); font-size: 13px; }

.sl2-section { padding: 112px 0 120px; background: #f5f7f4; }.sl2-section-head { max-width: 760px; margin-bottom: 56px; }.sl2-section-head h2, .sl2-workflow-copy h2, .sl2-cta h2 { margin: 0; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.065em; }.sl2-section-head > p:last-child, .sl2-workflow-copy > p:not(.sl2-kicker), .sl2-cta > p:not(.sl2-kicker) { max-width: 570px; margin: 22px 0 0; color: #58645d; font-size: 16px; line-height: 1.65; }.sl2-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.sl2-feature-grid article { min-height: 330px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--sl2-line); border-radius: 18px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }.sl2-feature-grid article:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(7,17,13,.09); }.sl2-feature-grid article:nth-child(2) { color: #fff; background: var(--sl2-ink); border-color: var(--sl2-ink); }.sl2-feature-num { color: #8d998f; font-size: 11px; font-weight: 800; letter-spacing: .08em; }.sl2-feature-icon { margin: 38px 0 20px; color: var(--sl2-green-strong); font-size: 33px; line-height: 1; }.sl2-feature-grid h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.04em; }.sl2-feature-grid p { margin: 0; color: #657169; font-size: 14px; line-height: 1.6; }.sl2-feature-grid article:nth-child(2) p { color: rgba(255,255,255,.62); }.sl2-feature-grid a { display: inline-flex; gap: 8px; margin-top: auto; padding-top: 24px; color: var(--sl2-green-strong); font-size: 12px; font-weight: 800; }

.sl2-workflow { padding: 116px 0; color: #fff; background: var(--sl2-ink); }.sl2-workflow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 92px; }.sl2-workflow-copy { align-self: start; }.sl2-workflow-copy > p:not(.sl2-kicker) { color: rgba(255,255,255,.62); }.sl2-workflow-copy .sl2-button { margin-top: 30px; }.sl2-timeline { display: grid; }.sl2-timeline article { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 21px 0; border-top: 1px solid rgba(255,255,255,.16); }.sl2-timeline article:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }.sl2-timeline > article > span { color: var(--sl2-green); font-size: 13px; font-weight: 800; }.sl2-timeline strong { font-size: 19px; letter-spacing: -.025em; }.sl2-timeline p { margin: 8px 0 0; color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.5; }

.sl2-cta { padding: 120px 0 126px; text-align: center; background: var(--sl2-mint); }.sl2-cta .sl2-kicker { justify-content: center; }.sl2-cta h2 { color: var(--sl2-ink); }.sl2-cta > p:not(.sl2-kicker) { margin-inline: auto; }.sl2-cta .sl2-button { margin-top: 30px; }.sl2-footer { color: #fff; background: var(--sl2-ink); }.sl2-footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; min-height: 90px; }.sl2-footer p { margin: 0; color: rgba(255,255,255,.5); font-size: 12px; }.sl2-footer-inner > div { display: flex; gap: 20px; align-items: center; }.sl2-footer-inner > div a, .sl2-footer-inner > div span { color: rgba(255,255,255,.6); font-size: 12px; }.sl2-footer-inner > div a:hover { color: var(--sl2-green); }

@media (max-width: 1050px) { .sl2-hero-grid { grid-template-columns: 1fr; padding-top: 62px; }.sl2-hero-copy { max-width: 680px; }.sl2-hero-visual { max-width: 700px; width: 100%; margin: 0 auto; }.sl2-workflow-grid { gap: 46px; }.sl2-trust-inner { grid-template-columns: repeat(2, 1fr); padding: 24px 0; }.sl2-trust-inner > span { grid-column: 1 / -1; }.sl2-trust-inner strong:nth-child(3) { border-left: 0; } }

@media (max-width: 720px) { .sl2-shell { width: min(100% - 36px, 560px); }.sl2-nav-inner { grid-template-columns: auto auto; justify-content: space-between; min-height: 68px; }.sl2-links, .sl2-text-link { display: none; }.sl2-nav-actions { gap: 0; }.sl2-button-dark { min-height: 38px; padding: 9px 13px; font-size: 11px; }.sl2-hero-grid { min-height: auto; padding: 58px 0 66px; gap: 46px; }.sl2-hero h1 { font-size: 46px; }.sl2-lead { font-size: 15px; }.sl2-proof-row { margin-top: 44px; gap: 12px; }.sl2-proof-row strong { font-size: 13px; }.sl2-proof-row span { font-size: 10px; }.sl2-hero-visual { min-height: 420px; }.sl2-dashboard { padding: 12px; border-radius: 16px; transform: none; }.sl2-dashboard-intro { padding: 16px 2px 13px; }.sl2-dashboard-intro h2 { font-size: 16px; }.sl2-metrics { gap: 6px; }.sl2-metrics > div { min-height: 86px; padding: 9px; }.sl2-metrics strong { margin: 11px 0 5px; font-size: 15px; }.sl2-metrics span, .sl2-metrics small { font-size: 8px; }.sl2-float { display: none; }.sl2-orbit { display: none; }.sl2-trust-inner { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }.sl2-trust-inner > span { grid-column: auto; }.sl2-trust-inner strong { padding: 0; border: 0; font-size: 12px; }.sl2-section, .sl2-workflow, .sl2-cta { padding: 76px 0; }.sl2-section-head { margin-bottom: 34px; }.sl2-section-head h2, .sl2-workflow-copy h2, .sl2-cta h2 { font-size: 40px; }.sl2-feature-grid { grid-template-columns: 1fr; }.sl2-feature-grid article { min-height: 280px; }.sl2-workflow-grid { grid-template-columns: 1fr; gap: 46px; }.sl2-timeline article { grid-template-columns: 42px 1fr; }.sl2-footer-inner { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }.sl2-footer-inner > div { flex-wrap: wrap; }.sl2-chart { height: 92px; } }









/* KISMART landing refresh: green-only, editorial, restrained, and phone-first. */

.sl4-land { --sl4-ink: #101614; --sl4-ink-soft: #18211c; --sl4-green: #9eb5a0; --sl4-green-dark: #5e8366; --sl4-paper: #f7f6f1; --sl4-warm: #e8e5dc; --sl4-clay: #d8b09e; --sl4-line: rgba(16,22,20,.16); margin: 0; color: var(--sl4-ink); background: var(--sl4-paper); font-family: "Outfit", Inter, "Segoe UI", Arial, sans-serif; }.sl4-land *, .sl4-land *::before, .sl4-land *::after { box-sizing: border-box; }.sl4-land a { text-decoration: none; }.sl4-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }.sl4-nav { background: var(--sl4-paper); color: var(--sl4-ink); border-bottom: 1px solid var(--sl4-line); }.sl4-nav-inner { min-height: 82px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }.sl4-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sl4-ink); font-size: 20px; font-weight: 800; letter-spacing: -.055em; }.sl4-brand-mark { position: relative; display: block; width: 30px; height: 30px; overflow: hidden; flex: 0 0 30px; border-radius: 8px; background: #fff; }.sl4-brand-mark img { position: absolute; top: -35px; left: -50px; width: 144px; height: 144px; max-width: none; object-fit: contain; }.sl4-footer .sl4-brand { color: #fff; }.sl4-links { display: flex; justify-content: center; gap: 32px; }.sl4-links a, .sl4-nav-quiet { color: rgba(16,22,20,.62); font-size: 13px; font-weight: 600; }.sl4-links a:hover, .sl4-nav-quiet:hover { color: var(--sl4-ink); }.sl4-nav-actions { display: flex; align-items: center; gap: 24px; }.sl4-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; transition: transform .18s ease, background .18s ease, border-color .18s ease; }.sl4-button:hover { transform: translateY(-2px); }.sl4-button-dark { color: #fff; background: var(--sl4-ink); }.sl4-button-dark:hover { background: var(--sl4-ink-soft); }.sl4-button-green { color: var(--sl4-ink); background: var(--sl4-green); }.sl4-button-green:hover { background: #b1c3b3; }.sl4-inline-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 600; }.sl4-inline-link:hover { color: var(--sl4-green); }

.sl4-hero { position: relative; overflow: hidden; color: #fff; background: var(--sl4-ink); }.sl4-hero::after { content: ""; position: absolute; width: 720px; height: 420px; right: -130px; bottom: -180px; border-radius: 50%; background: rgba(158,181,160,.11); filter: blur(28px); }.sl4-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr); align-items: center; gap: 68px; min-height: 700px; padding-top: 70px; padding-bottom: 74px; }.sl4-hero-copy { max-width: 570px; }.sl4-kicker { margin: 0 0 22px; color: var(--sl4-green); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.sl4-hero .sl4-kicker span { color: rgba(255,255,255,.42); padding: 0 3px; }.sl4-hero h1 { max-width: 600px; margin: 0; color: #fff; font-size: clamp(55px, 6.4vw, 86px); line-height: .96; font-weight: 700; letter-spacing: -.08em; }.sl4-hero h1 em, .sl4-section h2 em, .sl4-workflow h2 em, .sl4-cta h2 em { color: var(--sl4-green); font-style: normal; }.sl4-hero-sub { max-width: 480px; margin: 29px 0 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.65; }.sl4-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }.sl4-hero-note { display: flex; align-items: start; gap: 14px; max-width: 365px; margin-top: 76px; }.sl4-hero-note > span { width: 32px; height: 1px; margin-top: 8px; flex: 0 0 32px; background: var(--sl4-green); }.sl4-hero-note p { margin: 0; color: rgba(255,255,255,.46); font-size: 12px; line-height: 1.5; }

.sl4-phone-stage { position: relative; display: grid; place-items: center; min-height: 576px; }.sl4-phone { position: relative; z-index: 2; width: 280px; height: 566px; padding: 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 41px; background: #0a0f0c; box-shadow: 20px 32px 70px rgba(0,0,0,.4), -15px -10px 45px rgba(158,181,160,.08); transform: rotate(5deg); }.sl4-phone::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 36px; pointer-events: none; }.sl4-phone-notch { position: absolute; z-index: 3; top: 9px; left: 50%; width: 103px; height: 23px; transform: translateX(-50%); border-radius: 0 0 16px 16px; background: #0a0f0c; }.sl4-phone-notch i { position: absolute; top: 8px; left: 35px; width: 31px; height: 4px; border-radius: 4px; background: #39433d; }.sl4-phone-notch b { position: absolute; top: 6px; right: 16px; width: 8px; height: 8px; border: 2px solid #29342d; border-radius: 50%; background: #536357; }.sl4-phone-screen { position: relative; height: 100%; overflow: hidden; padding: 18px 15px 12px; border-radius: 33px; color: var(--sl4-ink); background: #f6f5ef; }.sl4-phone-status { display: flex; justify-content: space-between; padding: 0 5px; color: rgba(16,22,20,.53); font-size: 9px; font-weight: 600; }.sl4-phone-appbar { display: flex; align-items: center; gap: 7px; margin-top: 20px; }.sl4-mini-mark { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; color: #fff; background: var(--sl4-ink); font-size: 8px; font-weight: 800; }.sl4-phone-appbar strong { font-size: 12px; letter-spacing: -.02em; }.sl4-phone-menu { margin-left: auto; color: #898f89; font-size: 13px; letter-spacing: 2px; }.sl4-phone-greeting { margin-top: 23px; }.sl4-phone-greeting small { color: #8a918a; font-size: 8px; letter-spacing: .07em; }.sl4-phone-greeting h2 { margin: 6px 0 3px; font-size: 23px; letter-spacing: -.06em; }.sl4-phone-greeting p { margin: 0; color: #8a918a; font-size: 10px; }.sl4-phone-balance { position: relative; margin-top: 20px; padding: 15px; overflow: hidden; border-radius: 13px; color: #fff; background: var(--sl4-ink); }.sl4-phone-balance > span { color: rgba(255,255,255,.53); font-size: 8px; letter-spacing: .07em; }.sl4-phone-balance strong { display: block; margin-top: 9px; font-size: 24px; letter-spacing: -.06em; }.sl4-phone-balance small { color: var(--sl4-green); font-size: 9px; }.sl4-phone-bars { display: flex; align-items: end; gap: 4px; height: 34px; margin-top: 11px; }.sl4-phone-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--sl4-green); opacity: .72; }.sl4-phone-bars i:nth-child(1) { height: 38%; }.sl4-phone-bars i:nth-child(2) { height: 52%; }.sl4-phone-bars i:nth-child(3) { height: 44%; }.sl4-phone-bars i:nth-child(4) { height: 69%; }.sl4-phone-bars i:nth-child(5) { height: 60%; }.sl4-phone-bars i:nth-child(6) { height: 84%; }.sl4-phone-bars i:nth-child(7) { height: 100%; }.sl4-phone-section { display: flex; justify-content: space-between; margin: 21px 2px 9px; }.sl4-phone-section strong { font-size: 12px; }.sl4-phone-section small { color: var(--sl4-green-dark); font-size: 9px; }.sl4-phone-list { display: grid; gap: 7px; }.sl4-phone-list > div { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px; border: 1px solid rgba(16,22,20,.1); border-radius: 9px; background: rgba(255,255,255,.58); }.sl4-list-mark { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; color: var(--sl4-ink); font-size: 11px; font-weight: 800; }.sl4-list-mark.sage { color: #fff; background: var(--sl4-green-dark); }.sl4-list-mark.clay { background: var(--sl4-clay); }.sl4-list-mark.ink { color: #fff; background: var(--sl4-ink); }.sl4-phone-list > div > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }.sl4-phone-list strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.sl4-phone-list small { overflow: hidden; color: #8a918a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.sl4-phone-list b { margin-left: auto; color: var(--sl4-green-dark); font-size: 8px; white-space: nowrap; }.sl4-phone-home { position: absolute; right: 16px; bottom: 11px; left: 16px; display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid rgba(16,22,20,.12); }.sl4-phone-home span { display: grid; justify-items: center; gap: 3px; color: #9ba09b; font-size: 13px; }.sl4-phone-home span.active { color: var(--sl4-green-dark); }.sl4-phone-home small { font-size: 7px; }.sl4-phone-label { position: absolute; right: 0; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.52); font-size: 11px; line-height: 1.25; }.sl4-phone-label > span { width: 28px; height: 1px; background: var(--sl4-green); }.sl4-phone-label p { margin: 0; }

.sl4-ribbon { color: var(--sl4-ink); background: var(--sl4-green); }.sl4-ribbon-inner { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); align-items: center; gap: 24px; min-height: 84px; }.sl4-ribbon-inner > span { font-size: 10px; font-weight: 800; letter-spacing: .12em; }.sl4-ribbon-inner strong { padding-left: 18px; border-left: 1px solid rgba(16,22,20,.24); font-size: 13px; }

.sl4-section { padding: 112px 0 124px; background: var(--sl4-paper); }.sl4-section-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; margin-bottom: 55px; }.sl4-section h2, .sl4-workflow h2, .sl4-cta h2 { margin: 0; font-size: clamp(40px, 5vw, 64px); line-height: .99; font-weight: 700; letter-spacing: -.07em; }.sl4-section-intro > p { max-width: 430px; margin: 0 0 5px; color: #6d746d; font-size: 16px; line-height: 1.6; }.sl4-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.sl4-card { overflow: hidden; border: 1px solid var(--sl4-line); background: #fff; }.sl4-card-art { position: relative; height: 214px; padding: 20px; overflow: hidden; color: #fff; background: var(--sl4-ink); }.sl4-card-art > span { position: relative; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.sl4-art-book::before, .sl4-art-payments::before, .sl4-art-device::before { content: ""; position: absolute; width: 240px; height: 240px; right: -75px; top: -82px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; }.sl4-art-book > div { position: absolute; right: 24px; bottom: 28px; left: 24px; display: grid; gap: 11px; }.sl4-art-book i { display: block; height: 1px; background: rgba(255,255,255,.37); }.sl4-art-book i:nth-child(2) { width: 72%; }.sl4-art-book i:nth-child(3) { width: 87%; }.sl4-art-book i:nth-child(4) { width: 58%; }.sl4-art-payments { background: var(--sl4-green-dark); }.sl4-art-payments strong { position: absolute; left: 22px; bottom: 24px; color: #fff; font-size: 38px; line-height: .86; letter-spacing: -.08em; }.sl4-art-payments strong::first-line { color: rgba(255,255,255,.64); font-size: 10px; letter-spacing: 0; }.sl4-art-payments small { position: absolute; right: 22px; bottom: 24px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.42); border-radius: 99px; font-size: 9px; }.sl4-art-device { color: var(--sl4-ink); background: var(--sl4-warm); }.sl4-device-shape { position: absolute; top: 45px; left: 50%; width: 82px; height: 128px; transform: translateX(-50%) rotate(10deg); border: 5px solid var(--sl4-ink); border-radius: 16px; background: #f7f6f1; box-shadow: 15px 13px 0 rgba(16,22,20,.13); }.sl4-device-shape i { position: absolute; top: 7px; left: 50%; width: 27px; height: 5px; transform: translateX(-50%); border-radius: 0 0 5px 5px; background: var(--sl4-ink); }.sl4-device-shape b { position: absolute; right: 12px; bottom: 15px; left: 12px; height: 22px; border-radius: 4px; background: var(--sl4-green); }.sl4-art-device small { position: absolute; right: 20px; bottom: 22px; padding: 7px 10px; border: 1px solid rgba(16,22,20,.2); border-radius: 99px; font-size: 9px; }.sl4-card-copy { min-height: 254px; padding: 25px 24px 22px; }.sl4-card-kicker { margin: 0 0 13px; color: var(--sl4-green-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.sl4-card h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.05em; }.sl4-card-copy > p:not(.sl4-card-kicker) { margin: 0; color: #747b74; font-size: 14px; line-height: 1.55; }.sl4-card-copy a { display: inline-flex; gap: 8px; margin-top: 25px; color: var(--sl4-ink); font-size: 12px; font-weight: 800; }.sl4-card-copy a:hover { color: var(--sl4-green-dark); }

.sl4-workflow { padding: 116px 0 124px; color: #fff; background: var(--sl4-ink); }.sl4-workflow-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 110px; }.sl4-workflow-heading > p:not(.sl4-kicker) { max-width: 390px; margin: 25px 0 0; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.6; }.sl4-workflow-heading .sl4-button { margin-top: 31px; }.sl4-steps { display: grid; }.sl4-steps article { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.17); }.sl4-steps article:last-child { border-bottom: 1px solid rgba(255,255,255,.17); }.sl4-steps article > span { color: var(--sl4-green); font-size: 12px; font-weight: 800; }.sl4-steps h3 { margin: 0; font-size: 19px; letter-spacing: -.025em; }.sl4-steps p { max-width: 410px; margin: 7px 0 0; color: rgba(255,255,255,.54); font-size: 14px; line-height: 1.5; }

.sl4-quote { background: var(--sl4-warm); }.sl4-quote-inner { display: grid; grid-template-columns: 90px 1fr; gap: 34px; align-items: center; min-height: 270px; }.sl4-quote-mark { color: var(--sl4-green-dark); font-size: 122px; line-height: .6; font-weight: 700; }.sl4-quote p { max-width: 720px; margin: 0; color: var(--sl4-ink); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.055em; }.sl4-quote small { display: block; margin-top: 19px; color: #7a807a; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }.sl4-cta { padding: 116px 0 124px; text-align: center; color: var(--sl4-ink); background: var(--sl4-paper); }.sl4-cta .sl4-kicker { color: var(--sl4-green-dark); }.sl4-cta > p:not(.sl4-kicker) { max-width: 430px; margin: 24px auto 0; color: #747b74; font-size: 16px; line-height: 1.6; }.sl4-cta .sl4-button { margin-top: 31px; }.sl4-footer { color: #fff; background: var(--sl4-ink); }.sl4-footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; min-height: 92px; }.sl4-footer p { margin: 0; color: rgba(255,255,255,.48); font-size: 12px; }.sl4-footer-inner > div { display: flex; gap: 20px; align-items: center; }.sl4-footer-inner > div a, .sl4-footer-inner > div span { color: rgba(255,255,255,.58); font-size: 12px; }.sl4-footer-inner > div a:hover { color: var(--sl4-green); }

@media (max-width: 1040px) { .sl4-hero-grid { grid-template-columns: minmax(0, 1fr) .82fr; gap: 28px; }.sl4-phone { width: 252px; height: 510px; }.sl4-phone-stage { min-height: 520px; }.sl4-phone-label { right: -20px; }.sl4-workflow-grid { gap: 50px; } }

@media (max-width: 800px) { .sl4-shell { width: min(100% - 40px, 560px); }.sl4-nav-inner { grid-template-columns: auto auto; justify-content: space-between; min-height: 72px; }.sl4-links, .sl4-nav-quiet { display: none; }.sl4-nav-actions { gap: 0; }.sl4-nav-actions .sl4-button { min-height: 40px; padding: 10px 15px; font-size: 12px; }.sl4-hero-grid { grid-template-columns: 1fr; gap: 38px; padding-top: 62px; padding-bottom: 66px; }.sl4-hero-copy { max-width: 600px; }.sl4-hero h1 { font-size: 58px; }.sl4-phone-stage { min-height: 540px; }.sl4-phone { transform: rotate(3deg); }.sl4-section-intro, .sl4-workflow-grid { grid-template-columns: 1fr; gap: 32px; }.sl4-section-intro { margin-bottom: 38px; }.sl4-card-grid { grid-template-columns: 1fr; }.sl4-card-art { height: 230px; }.sl4-ribbon-inner { grid-template-columns: repeat(2, 1fr); padding: 22px 0; }.sl4-ribbon-inner > span { grid-column: 1 / -1; }.sl4-ribbon-inner strong:nth-child(3) { border-left: 0; }.sl4-quote-inner { grid-template-columns: 52px 1fr; gap: 18px; }.sl4-quote-mark { font-size: 82px; }.sl4-footer-inner { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }.sl4-footer-inner > div { flex-wrap: wrap; } }

@media (max-width: 520px) { .sl4-shell { width: min(100% - 32px, 440px); }.sl4-hero h1 { font-size: 47px; }.sl4-hero-sub { font-size: 15px; }.sl4-hero-actions { align-items: stretch; flex-direction: column; gap: 16px; }.sl4-hero-actions .sl4-button, .sl4-inline-link { width: fit-content; }.sl4-phone-stage { min-height: 490px; }.sl4-phone { width: 238px; height: 476px; padding: 8px; border-radius: 36px; }.sl4-phone-screen { padding: 15px 12px 10px; border-radius: 29px; }.sl4-phone-notch { top: 8px; width: 88px; height: 20px; }.sl4-phone-greeting { margin-top: 18px; }.sl4-phone-greeting h2 { font-size: 19px; }.sl4-phone-balance { margin-top: 16px; padding: 12px; }.sl4-phone-balance strong { font-size: 21px; }.sl4-phone-list > div { min-height: 43px; }.sl4-phone-label { right: -7px; bottom: 5px; font-size: 10px; }.sl4-section, .sl4-workflow, .sl4-cta { padding: 78px 0; }.sl4-section h2, .sl4-workflow h2, .sl4-cta h2 { font-size: 43px; }.sl4-ribbon-inner { grid-template-columns: 1fr; gap: 12px; }.sl4-ribbon-inner strong { padding: 0; border: 0; }.sl4-quote-inner { min-height: 235px; }.sl4-quote p { font-size: 28px; } }





/* Final brand pass: white canvas, bright fresh green, and lighter editorial type. */

.sl4-land { --sl4-ink: #173d27; --sl4-ink-soft: #286f42; --sl4-green: #31915a; --sl4-green-dark: #31915a; --sl4-paper: #ffffff; --sl4-warm: #ffffff; --sl4-clay: #31915a; --sl4-line: rgba(23,61,39,.15); background: var(--sl4-paper); }

.sl4-hero { color: var(--sl4-ink); background: #eefaf0; }

.sl4-hero::after { background: rgba(154,236,168,.22); }

.sl4-hero .sl4-kicker span { color: rgba(23,61,39,.42); }

.sl4-hero h1 { color: var(--sl4-ink); font-weight: 500; }

.sl4-hero h1 em, .sl4-section h2 em, .sl4-workflow h2 em, .sl4-cta h2 em { color: var(--sl4-green-dark); }

.sl4-hero-sub { color: rgba(23,61,39,.68); }

.sl4-inline-link { color: var(--sl4-ink); }

.sl4-inline-link:hover { color: var(--sl4-green-dark); }

.sl4-hero-note p { color: rgba(23,61,39,.58); }

.sl4-phone { border-color: rgba(23,61,39,.22); background: var(--sl4-green-dark); box-shadow: 18px 28px 60px rgba(49,145,90,.22), -10px -8px 38px rgba(49,145,90,.14); }

.sl4-phone-notch { background: var(--sl4-green-dark); }

.sl4-phone-notch i { background: #79b985; }

.sl4-phone-balance { background: #31915a; }

.sl4-phone-label { color: rgba(23,61,39,.58); }

.sl4-phone-label > span { background: var(--sl4-green-dark); }

.sl4-workflow { color: var(--sl4-ink); background: var(--sl4-warm); }

.sl4-workflow-heading > p:not(.sl4-kicker) { color: rgba(23,61,39,.68); }

.sl4-steps article { border-top-color: rgba(23,61,39,.18); }

.sl4-steps article:last-child { border-bottom-color: rgba(23,61,39,.18); }

.sl4-steps p { color: rgba(23,61,39,.64); }

.sl4-steps h3, .sl4-card h3 { font-weight: 500; }

.sl4-section h2, .sl4-workflow h2, .sl4-cta h2 { font-weight: 500; }

.sl4-quote { background: #d8f2dc; }

.sl4-footer { color: var(--sl4-ink); background: #d8f2dc; }

.sl4-footer .sl4-brand { color: var(--sl4-ink); }

.sl4-footer p { color: rgba(23,61,39,.62); }

.sl4-footer-inner > div a, .sl4-footer-inner > div span { color: rgba(23,61,39,.7); }

.sl4-button-dark, .sl4-button-green { color: #fff; background: var(--sl4-green-dark); }

.sl4-button-dark:hover, .sl4-button-green:hover { background: var(--sl4-green-dark); filter: brightness(.94); }





/* White canvas pass: keep the green accents, remove colored section backgrounds. */

.sl4-land { --sl4-paper: #ffffff; --sl4-warm: #ffffff; background: #ffffff; }

.sl4-nav, .sl4-section, .sl4-cta { background: #ffffff; }

.sl4-hero { color: var(--sl4-ink); background: #ffffff; }

.sl4-hero::after { display: none; }

.sl4-ribbon { background: #ffffff; border-top: 1px solid var(--sl4-line); border-bottom: 1px solid var(--sl4-line); }

.sl4-workflow { color: var(--sl4-ink); background: #ffffff; border-top: 1px solid var(--sl4-line); border-bottom: 1px solid var(--sl4-line); }

.sl4-quote { background: #ffffff; border-bottom: 1px solid var(--sl4-line); }

.sl4-footer { color: var(--sl4-ink); background: #ffffff; border-top: 1px solid var(--sl4-line); }

.sl4-footer .sl4-brand { color: var(--sl4-ink); }

.sl4-hero-note > span, .sl4-phone-label > span { background: var(--sl4-green-dark); }





/* KISMART PestQuell-inspired landing system: airy, product-led, and green-forward. */

.sl5-land { --sl5-ink: #183c28; --sl5-ink-soft: #466553; --sl5-green: #2a9857; --sl5-green-bright: #63d980; --sl5-mint: #effaf0; --sl5-mint-deep: #d9f2dd; --sl5-paper: #ffffff; --sl5-line: rgba(24,60,40,.14); margin: 0; color: var(--sl5-ink); background: #fff; font-family: "Outfit", Inter, "Segoe UI", Arial, sans-serif; }

.sl5-land *, .sl5-land *::before, .sl5-land *::after { box-sizing: border-box; }

.sl5-land a { color: inherit; text-decoration: none; }

.sl5-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }

.sl5-topline { color: #fff; background: var(--sl5-green); font-size: 11px; font-weight: 500; letter-spacing: .02em; }

.sl5-topline .sl5-shell { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }

.sl5-nav { background: #fff; border-bottom: 1px solid var(--sl5-line); }

.sl5-nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; min-height: 84px; }

.sl5-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sl5-ink); font-size: 20px; font-weight: 700; letter-spacing: -.06em; }

.sl5-brand-mark { position: relative; display: block; width: 32px; height: 32px; overflow: hidden; flex: 0 0 32px; border-radius: 8px; background: #fff; }

.sl5-brand-mark img { position: absolute; top: -35px; left: -50px; width: 144px; height: 144px; max-width: none; object-fit: contain; }

.sl5-nav-links { display: flex; justify-content: center; gap: 34px; }

.sl5-nav-links a, .sl5-nav-link { color: rgba(24,60,40,.67); font-size: 13px; font-weight: 500; }

.sl5-nav-links a:hover, .sl5-nav-link:hover { color: var(--sl5-green); }

.sl5-nav-actions { display: flex; align-items: center; gap: 22px; }

.sl5-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 18px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; transition: transform .18s ease, background .18s ease, border-color .18s ease; }

.sl5-button:hover { transform: translateY(-2px); }

.sl5-button-green { color: #fff; background: var(--sl5-green); box-shadow: 0 8px 18px rgba(42,152,87,.16); }

.sl5-button-green:hover { color: #fff; background: #208149; }

.sl5-button-large { min-height: 51px; padding: 14px 22px; }

.sl5-button-outline { color: var(--sl5-green); border-color: rgba(99,217,128,.65); background: transparent; }

.sl5-button-outline:hover { color: var(--sl5-ink); border-color: var(--sl5-green-bright); background: rgba(99,217,128,.12); }

.sl5-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: var(--sl5-green); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.sl5-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sl5-green-bright); box-shadow: 0 0 0 4px rgba(99,217,128,.17); }

.sl5-hero { overflow: hidden; background: var(--sl5-mint); }

.sl5-hero-grid { display: grid; grid-template-columns: .89fr 1.11fr; align-items: center; gap: 28px; min-height: 670px; padding-top: 55px; padding-bottom: 62px; }

.sl5-hero-copy { position: relative; z-index: 2; max-width: 500px; padding: 22px 0; }

.sl5-hero h1 { max-width: 560px; margin: 0; color: var(--sl5-ink); font-size: clamp(56px, 6.6vw, 86px); line-height: .94; font-weight: 600; letter-spacing: -.08em; }

.sl5-hero h1 em, .sl5-intro h2 em, .sl5-section-head h2 em, .sl5-workflow h2 em, .sl5-cta h2 em { color: var(--sl5-green); font-style: normal; }

.sl5-hero-text { max-width: 440px; margin: 28px 0 0; color: rgba(24,60,40,.71); font-size: 16px; line-height: 1.62; }

.sl5-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 32px; }

.sl5-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--sl5-ink); font-size: 13px; font-weight: 600; }

.sl5-text-link:hover { color: var(--sl5-green); }

.sl5-text-link span { font-size: 18px; line-height: 0; }

.sl5-text-link-dark { color: var(--sl5-green); }

.sl5-hero-proof { display: flex; align-items: center; gap: 11px; margin-top: 56px; }

.sl5-proof-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: var(--sl5-green); font-size: 12px; font-weight: 600; }

.sl5-hero-proof span + span { display: grid; gap: 2px; }

.sl5-hero-proof strong { font-size: 11px; font-weight: 600; }

.sl5-hero-proof small { color: rgba(24,60,40,.58); font-size: 10px; }

.sl5-hero-visual { position: relative; min-height: 520px; }

.sl5-visual-wash { position: absolute; inset: 7% 0 0 7%; border-radius: 46% 46% 18px 18px; background: rgba(217,242,221,.9); }

.sl5-hero-photo-frame { position: absolute; inset: 4% 0 4% 5%; overflow: hidden; border: 9px solid #fff; border-radius: 20px; box-shadow: 0 21px 50px rgba(49,110,69,.14); transform: rotate(2.2deg); }

.sl5-hero-photo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 59% center; }

.sl5-product-phone { position: absolute; right: 7%; bottom: 5%; z-index: 4; width: 188px; height: 382px; padding: 8px; border: 1px solid rgba(24,60,40,.28); border-radius: 29px; background: #153b27; box-shadow: 0 20px 32px rgba(24,60,40,.22), 0 4px 0 rgba(24,60,40,.1); transform: rotate(6deg); }

.sl5-product-phone::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 25px; pointer-events: none; }

.sl5-product-phone-speaker { position: absolute; top: 8px; left: 50%; z-index: 3; width: 58px; height: 14px; transform: translateX(-50%); border-radius: 0 0 12px 12px; background: #153b27; }

.sl5-product-phone-speaker::after { content: ""; position: absolute; top: 5px; left: 50%; width: 24px; height: 3px; transform: translateX(-50%); border-radius: 9px; background: #476a54; }

.sl5-product-phone-screen { position: relative; height: 100%; overflow: hidden; padding: 16px 11px 9px; border-radius: 22px; color: var(--sl5-ink); background: #f9fffa; }

.sl5-device-status { display: flex; justify-content: space-between; padding: 0 4px; color: rgba(24,60,40,.52); font-size: 7px; font-weight: 600; }

.sl5-device-header { display: flex; align-items: center; gap: 6px; margin-top: 16px; }

.sl5-device-logo { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: #fff; background: var(--sl5-green); font-size: 8px; font-weight: 700; }

.sl5-device-header strong { font-size: 10px; font-weight: 600; letter-spacing: -.02em; }

.sl5-device-avatar { display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; color: var(--sl5-green); background: var(--sl5-mint-deep); font-size: 6px; font-weight: 700; }

.sl5-device-greeting { margin-top: 18px; }

.sl5-device-greeting small { color: rgba(24,60,40,.48); font-size: 6px; letter-spacing: .08em; }

.sl5-device-greeting h3 { margin: 4px 0 0; color: var(--sl5-ink); font-size: 18px; line-height: 1; font-weight: 500; letter-spacing: -.06em; }

.sl5-device-summary { position: relative; margin-top: 15px; padding: 11px 10px 10px; overflow: hidden; border-radius: 10px; color: #fff; background: var(--sl5-green); }

.sl5-device-summary::after { content: ""; position: absolute; right: -25px; bottom: -29px; width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }

.sl5-device-summary small { color: rgba(255,255,255,.68); font-size: 6px; letter-spacing: .08em; }

.sl5-device-summary strong { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: -.06em; }

.sl5-device-summary span { display: block; margin-top: 4px; color: rgba(255,255,255,.82); font-size: 6px; }

.sl5-device-progress { position: relative; z-index: 1; height: 3px; margin-top: 10px; border-radius: 99px; background: rgba(255,255,255,.28); }

.sl5-device-progress i { display: block; width: 72%; height: 100%; border-radius: inherit; background: #c9f7d1; }

.sl5-device-section { display: flex; justify-content: space-between; align-items: center; margin: 15px 1px 7px; }

.sl5-device-section strong { font-size: 10px; font-weight: 600; }

.sl5-device-section small { color: var(--sl5-green); font-size: 7px; }

.sl5-device-list { display: grid; gap: 5px; }

.sl5-device-list > div { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center; min-height: 39px; padding: 6px; border: 1px solid rgba(24,60,40,.1); border-radius: 7px; background: #fff; }

.sl5-device-list > div > span:first-child { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: #fff; font-size: 9px; font-weight: 700; }

.sl5-device-list > div > span:first-child.paid { background: var(--sl5-green); }

.sl5-device-list > div > span:first-child.due { color: var(--sl5-green); background: #e8f8e9; }

.sl5-device-list > div > span:first-child.new { color: #fff; background: #84c98c; }

.sl5-device-list > div > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }

.sl5-device-list b { overflow: hidden; font-size: 7px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.sl5-device-list small { overflow: hidden; color: rgba(24,60,40,.5); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }

.sl5-device-list > div > strong { color: var(--sl5-green); font-size: 6px; font-weight: 600; white-space: nowrap; }

.sl5-device-nav { position: absolute; right: 10px; bottom: 8px; left: 10px; display: flex; justify-content: space-around; padding-top: 7px; border-top: 1px solid rgba(24,60,40,.1); }

.sl5-device-nav span { display: grid; justify-items: center; gap: 2px; color: rgba(24,60,40,.38); font-size: 6px; }

.sl5-device-nav span.active { color: var(--sl5-green); }

.sl5-device-nav b { font-size: 11px; font-weight: 500; line-height: 1; }

.sl5-device-nav span.active b { font-weight: 700; }



.sl5-float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(24,60,40,.09); border-radius: 12px; background: #fff; box-shadow: 0 15px 30px rgba(38,88,50,.13); }

.sl5-float-card-top { top: 12%; left: -3%; padding: 11px 15px 11px 11px; }

.sl5-float-card-bottom { right: -1%; bottom: 11%; display: grid; gap: 3px; padding: 14px 17px; }

.sl5-float-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: var(--sl5-green); font-size: 13px; }

.sl5-float-card small, .sl5-float-label { color: rgba(24,60,40,.55); font-size: 9px; }

.sl5-float-card strong { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; }

.sl5-float-number { color: var(--sl5-ink); font-size: 19px; font-weight: 600; letter-spacing: -.05em; }

.sl5-float-label b { margin-left: 5px; color: var(--sl5-green); font-weight: 600; }

.sl5-hero-sticker { position: absolute; right: 6%; top: 2%; z-index: 3; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; color: var(--sl5-ink); }

.sl5-hero-sticker span { color: var(--sl5-green); font-size: 12px; font-weight: 600; }

.sl5-hero-sticker small { padding-top: 2px; font-size: 10px; line-height: 1.18; }

.sl5-trust { background: #fff; border-bottom: 1px solid var(--sl5-line); }

.sl5-trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 92px; }

.sl5-trust-label { color: rgba(24,60,40,.52); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }

.sl5-trust-items { display: flex; align-items: center; gap: 20px; color: var(--sl5-ink-soft); font-size: 13px; font-weight: 500; }

.sl5-trust-items i { width: 4px; height: 4px; border-radius: 50%; background: var(--sl5-green-bright); }

.sl5-section { padding: 112px 0; background: #fff; }

.sl5-intro-grid { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 86px; }

.sl5-intro-copy { max-width: 450px; }

.sl5-intro h2, .sl5-section-head h2, .sl5-workflow h2, .sl5-cta h2 { margin: 0; font-size: clamp(42px, 5vw, 67px); line-height: .98; font-weight: 600; letter-spacing: -.075em; }

.sl5-body { color: rgba(24,60,40,.64); font-size: 15px; line-height: 1.65; }

.sl5-intro-copy > .sl5-body { max-width: 390px; margin: 25px 0 0; }

.sl5-arrow-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 27px; color: var(--sl5-green); font-size: 13px; font-weight: 600; }

.sl5-arrow-link span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(42,152,87,.4); border-radius: 50%; font-size: 16px; }

.sl5-intro-art { position: relative; min-height: 376px; overflow: hidden; border-radius: 18px; background: var(--sl5-mint); }

.sl5-intro-art > img { width: 100%; height: 100%; min-height: 376px; display: block; object-fit: cover; object-position: 57% center; }

.sl5-art-caption { position: absolute; right: 20px; bottom: 20px; left: 20px; display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.44); border-radius: 10px; color: #fff; background: rgba(24,60,40,.76); backdrop-filter: blur(8px); }

.sl5-art-caption span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.sl5-art-caption strong { text-align: right; font-size: 17px; line-height: .98; font-weight: 500; letter-spacing: -.04em; }

.sl5-solutions { padding-top: 24px; }

.sl5-section-head { display: grid; grid-template-columns: 1fr .75fr; gap: 60px; align-items: end; margin-bottom: 48px; }

.sl5-section-head > .sl5-body { max-width: 350px; margin: 0 0 4px; }

.sl5-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.sl5-solution-card { position: relative; min-height: 338px; overflow: hidden; padding: 25px; border: 1px solid var(--sl5-line); border-radius: 16px; background: #fff; }

.sl5-solution-main { background: var(--sl5-mint); }

.sl5-solution-green { color: #fff; border-color: var(--sl5-green); background: var(--sl5-green); }

.sl5-card-number { color: rgba(24,60,40,.5); font-size: 11px; font-weight: 600; }

.sl5-solution-green .sl5-card-number { color: rgba(255,255,255,.7); }

.sl5-card-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-top: 59px; border-radius: 12px; color: #fff; background: var(--sl5-green); font-size: 18px; }

.sl5-solution-green .sl5-card-icon { color: var(--sl5-green); background: #fff; }

.sl5-solution-card h3 { margin: 19px 0 9px; font-size: 26px; font-weight: 500; letter-spacing: -.06em; }

.sl5-solution-card p { max-width: 245px; margin: 0; color: rgba(24,60,40,.64); font-size: 13px; line-height: 1.55; }

.sl5-solution-green p { color: rgba(255,255,255,.76); }

.sl5-solution-card a { position: absolute; right: 25px; bottom: 24px; left: 25px; display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid rgba(24,60,40,.14); color: var(--sl5-green); font-size: 12px; font-weight: 600; }

.sl5-solution-green a { color: #fff; border-top-color: rgba(255,255,255,.28); }

.sl5-solution-image { padding: 0; border: 0; }

.sl5-solution-image > img { width: 100%; height: 100%; min-height: 338px; display: block; object-fit: cover; object-position: 63% center; }

.sl5-image-card-overlay { position: absolute; inset: auto 14px 14px; display: grid; gap: 8px; padding: 15px; border-radius: 10px; color: #fff; background: rgba(24,60,40,.84); backdrop-filter: blur(7px); }

.sl5-image-card-overlay .sl5-card-number { color: rgba(255,255,255,.7); }

.sl5-image-card-overlay strong { font-size: 20px; font-weight: 500; letter-spacing: -.045em; }

.sl5-image-card-overlay a { display: flex; justify-content: space-between; color: var(--sl5-green-bright); font-size: 11px; font-weight: 600; }

.sl5-workflow { padding: 112px 0 120px; color: #fff; background: var(--sl5-ink); }

.sl5-workflow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }

.sl5-workflow .sl5-eyebrow { color: var(--sl5-green-bright); }

.sl5-workflow h2 em { color: var(--sl5-green-bright); }

.sl5-workflow .sl5-body { max-width: 310px; margin: 24px 0 0; color: rgba(255,255,255,.62); }

.sl5-workflow-intro .sl5-button { margin-top: 29px; }

.sl5-steps { display: grid; }

.sl5-steps article { display: grid; grid-template-columns: 48px 1fr 24px; gap: 19px; align-items: start; padding: 21px 0; border-top: 1px solid rgba(255,255,255,.18); }

.sl5-steps article:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }

.sl5-steps article > span { color: var(--sl5-green-bright); font-size: 12px; font-weight: 600; }

.sl5-steps h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }

.sl5-steps p { margin: 7px 0 0; color: rgba(255,255,255,.53); font-size: 13px; line-height: 1.5; }

.sl5-steps b { color: rgba(255,255,255,.55); font-size: 17px; font-weight: 400; }

.sl5-quote { background: var(--sl5-mint); }

.sl5-quote-grid { display: grid; grid-template-columns: 75px 1fr 180px; gap: 30px; align-items: center; min-height: 270px; }

.sl5-quote-mark { color: var(--sl5-green); font-size: 110px; line-height: .5; font-weight: 500; }

.sl5-quote p { max-width: 660px; margin: 0; color: var(--sl5-ink); font-size: clamp(27px, 3.5vw, 45px); line-height: 1.04; font-weight: 500; letter-spacing: -.065em; }

.sl5-quote small { display: block; margin-top: 18px; color: rgba(24,60,40,.54); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.sl5-quote-line { width: 100%; height: 1px; background: rgba(42,152,87,.4); }

.sl5-cta { padding: 116px 0 123px; text-align: center; background: #fff; }

.sl5-cta .sl5-eyebrow { justify-content: center; }

.sl5-cta .sl5-body { max-width: 400px; margin: 24px auto 0; }

.sl5-cta-actions { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 31px; }

.sl5-footer { color: #fff; background: var(--sl5-green); }

.sl5-footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; min-height: 92px; }

.sl5-footer .sl5-brand { color: #fff; }

.sl5-footer .sl5-brand-mark { background: #fff; }

.sl5-footer p { margin: 0; color: rgba(255,255,255,.78); font-size: 11px; }

.sl5-footer-inner > div { display: flex; gap: 19px; align-items: center; }

.sl5-footer-inner > div a, .sl5-footer-inner > div span { color: rgba(255,255,255,.83); font-size: 11px; }

@media (max-width: 1000px) { .sl5-product-phone { right: 4%; bottom: 4%; transform: rotate(5deg) scale(.92); } .sl5-hero-grid { grid-template-columns: .9fr 1.1fr; gap: 12px; }.sl5-hero-visual { min-height: 470px; }.sl5-float-card-top { left: -1%; }.sl5-float-card-bottom { right: 1%; }.sl5-intro-grid { gap: 46px; }.sl5-workflow-grid { gap: 50px; } }

@media (max-width: 800px) { .sl5-product-phone { right: 4%; bottom: 2%; transform: rotate(4deg) scale(.86); transform-origin: right bottom; } .sl5-shell { width: min(100% - 40px, 560px); }.sl5-topline .sl5-shell { gap: 12px; }.sl5-topline .sl5-shell span:last-child { display: none; }.sl5-nav-inner { grid-template-columns: auto auto; justify-content: space-between; min-height: 72px; }.sl5-nav-links, .sl5-nav-link { display: none; }.sl5-nav-actions { gap: 0; }.sl5-nav-actions .sl5-button { min-height: 40px; padding: 10px 14px; font-size: 12px; }.sl5-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; padding-bottom: 46px; }.sl5-hero-copy { max-width: 580px; }.sl5-hero h1 { font-size: 58px; }.sl5-hero-proof { margin-top: 38px; }.sl5-hero-visual { min-height: 450px; margin: 0 -7px; }.sl5-hero-photo-frame { inset: 2% 4% 2% 5%; }.sl5-float-card-top { left: 1%; }.sl5-float-card-bottom { right: 2%; bottom: 5%; }.sl5-trust-inner { display: grid; gap: 14px; padding: 22px 0; }.sl5-trust-items { flex-wrap: wrap; gap: 11px 14px; }.sl5-intro-grid { grid-template-columns: 1fr; gap: 36px; }.sl5-section { padding: 78px 0; }.sl5-intro-art { min-height: 330px; }.sl5-intro-art > img { min-height: 330px; }.sl5-section-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 33px; }.sl5-solution-grid { grid-template-columns: 1fr; }.sl5-solution-card { min-height: 300px; }.sl5-solution-image > img { min-height: 300px; }.sl5-workflow { padding: 80px 0; }.sl5-workflow-grid { grid-template-columns: 1fr; gap: 45px; }.sl5-quote-grid { grid-template-columns: 45px 1fr; gap: 15px; min-height: 250px; }.sl5-quote-line { display: none; }.sl5-quote-mark { font-size: 75px; }.sl5-cta { padding: 82px 0 90px; }.sl5-cta-actions { flex-direction: column; gap: 19px; }.sl5-footer-inner { grid-template-columns: 1fr; gap: 13px; padding: 25px 0; }.sl5-footer-inner > div { flex-wrap: wrap; } }

@media (max-width: 520px) { .sl5-product-phone { right: 3%; bottom: 0; transform: rotate(3deg) scale(.72); transform-origin: right bottom; } .sl5-shell { width: min(100% - 32px, 440px); }.sl5-hero h1 { font-size: 47px; }.sl5-hero-text { font-size: 15px; }.sl5-hero-visual { min-height: 354px; }.sl5-float-card-top { top: 5%; transform: scale(.9); transform-origin: left top; }.sl5-float-card-bottom { bottom: 0; transform: scale(.9); transform-origin: right bottom; }.sl5-hero-sticker { right: 3%; }.sl5-art-caption { right: 12px; bottom: 12px; left: 12px; }.sl5-art-caption strong { font-size: 15px; }.sl5-intro h2, .sl5-section-head h2, .sl5-workflow h2, .sl5-cta h2 { font-size: 43px; } }





/* KISMART professional landing system: editorial structure, product clarity, and generous whitespace. */

.sl6-land { --sl6-ink: #173c27; --sl6-ink-2: #365a44; --sl6-green: #23844d; --sl6-green-bright: #66d981; --sl6-mint: #effaf0; --sl6-mint-2: #dff4e2; --sl6-line: rgba(23,60,39,.14); color: var(--sl6-ink); background: #fff; font-family: "Outfit", Inter, "Segoe UI", Arial, sans-serif; }

.sl6-land *, .sl6-land *::before, .sl6-land *::after { box-sizing: border-box; }

.sl6-land a { color: inherit; text-decoration: none; }

.sl6-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }

.sl6-nav { position: relative; z-index: 5; border-bottom: 1px solid var(--sl6-line); background: #fff; }

.sl6-nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; min-height: 84px; }

.sl6-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.06em; }

.sl6-brand-mark { position: relative; display: block; width: 31px; height: 31px; overflow: hidden; flex: 0 0 31px; border-radius: 8px; background: #fff; }

.sl6-brand-mark img { position: absolute; top: -35px; left: -50px; width: 144px; height: 144px; max-width: none; object-fit: contain; }

.sl6-links { display: flex; justify-content: center; gap: 34px; }

.sl6-links a, .sl6-actions > a:first-child { color: rgba(23,60,39,.65); font-size: 13px; font-weight: 500; }

.sl6-links a:hover, .sl6-actions > a:first-child:hover { color: var(--sl6-green); }

.sl6-actions { display: flex; align-items: center; gap: 23px; }

.sl6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 45px; padding: 12px 18px; border: 1px solid transparent; border-radius: 8px; color: #fff; background: var(--sl6-green); font-size: 13px; font-weight: 600; box-shadow: 0 8px 18px rgba(35,132,77,.14); transition: transform .18s ease, background .18s ease; }

.sl6-btn:hover { color: #fff; background: #1c6e40; transform: translateY(-2px); }

.sl6-btn-large { min-height: 53px; padding: 15px 22px; }

.sl6-overline { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: var(--sl6-green); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.sl6-overline > span { width: 8px; height: 8px; border-radius: 50%; background: var(--sl6-green-bright); box-shadow: 0 0 0 4px rgba(102,217,129,.16); }

.sl6-hero { overflow: hidden; background: var(--sl6-mint); }

.sl6-hero-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 40px; align-items: center; min-height: 710px; padding-top: 55px; padding-bottom: 55px; }

.sl6-hero-copy { position: relative; z-index: 2; max-width: 530px; }

.sl6-hero h1 { max-width: 570px; margin: 0; font-size: clamp(54px, 6.1vw, 82px); line-height: .96; font-weight: 600; letter-spacing: -.085em; }

.sl6-hero h1 em, .sl6-overview h2 em, .sl6-story h2 em, .sl6-section-heading h2 em, .sl6-process h2 em, .sl6-cta h2 em { color: var(--sl6-green); font-style: normal; }

.sl6-lead { max-width: 455px; margin: 28px 0 0; color: rgba(23,60,39,.7); font-size: 16px; line-height: 1.65; }

.sl6-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 33px; }

.sl6-link { display: inline-flex; align-items: center; gap: 10px; color: var(--sl6-ink); font-size: 13px; font-weight: 600; }

.sl6-link:hover { color: var(--sl6-green); }

.sl6-link span { font-size: 18px; line-height: 0; }

.sl6-link-green { color: var(--sl6-green); }

.sl6-hero-signoff { display: flex; align-items: center; gap: 11px; margin-top: 58px; }

.sl6-signoff-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--sl6-green); font-size: 12px; font-weight: 600; }

.sl6-hero-signoff span + span { display: grid; gap: 2px; }

.sl6-hero-signoff strong { font-size: 11px; font-weight: 600; }

.sl6-hero-signoff small { color: rgba(23,60,39,.56); font-size: 10px; }

.sl6-hero-art { position: relative; min-height: 570px; }

.sl6-art-backdrop { position: absolute; inset: 6% 0 0 5%; border-radius: 48% 48% 20px 20px; background: var(--sl6-mint-2); }

.sl6-art-frame { position: absolute; inset: 5% 0 4% 3%; overflow: hidden; border: 9px solid #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(39,96,54,.15); transform: rotate(1.8deg); }

.sl6-art-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 60% center; }

.sl6-art-tag { position: absolute; top: 2%; right: 5%; z-index: 3; display: flex; gap: 8px; color: var(--sl6-ink); }

.sl6-art-tag span { color: var(--sl6-green); font-size: 11px; font-weight: 600; }

.sl6-art-tag strong { font-size: 11px; line-height: 1.1; font-weight: 500; }

.sl6-art-stat { position: absolute; right: -1%; bottom: 10%; z-index: 4; display: grid; gap: 3px; padding: 15px 17px; border: 1px solid rgba(23,60,39,.1); border-radius: 11px; background: #fff; box-shadow: 0 15px 30px rgba(39,96,54,.14); }

.sl6-art-stat small { color: rgba(23,60,39,.55); font-size: 8px; letter-spacing: .09em; }

.sl6-art-stat strong { font-size: 20px; font-weight: 600; letter-spacing: -.05em; }

.sl6-art-stat span { color: var(--sl6-green); font-size: 9px; }

.sl6-product-phone { position: absolute; right: 10%; bottom: 4%; z-index: 5; width: 190px; height: 390px; padding: 8px; border: 1px solid rgba(23,60,39,.32); border-radius: 29px; background: #153b27; box-shadow: 0 22px 34px rgba(23,60,39,.24), 0 4px 0 rgba(23,60,39,.1); transform: rotate(6deg); }

.sl6-product-phone::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 25px; pointer-events: none; }

.sl6-phone-notch { position: absolute; top: 8px; left: 50%; z-index: 3; width: 58px; height: 14px; transform: translateX(-50%); border-radius: 0 0 12px 12px; background: #153b27; }

.sl6-phone-notch::after { content: ""; position: absolute; top: 5px; left: 50%; width: 24px; height: 3px; transform: translateX(-50%); border-radius: 9px; background: #476a54; }

.sl6-phone-screen { position: relative; height: 100%; overflow: hidden; padding: 16px 11px 9px; border-radius: 22px; color: var(--sl6-ink); background: #f9fffa; }

.sl6-phone-status { display: flex; justify-content: space-between; padding: 0 4px; color: rgba(23,60,39,.52); font-size: 7px; font-weight: 600; }

.sl6-phone-head { display: flex; align-items: center; gap: 6px; margin-top: 16px; }

.sl6-phone-logo { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: #fff; background: var(--sl6-green); font-size: 8px; font-weight: 700; }

.sl6-phone-head strong { font-size: 10px; font-weight: 600; }.sl6-phone-admin { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; margin-left: auto; padding: 0 6px; border: 1px solid rgba(35,132,77,.24); border-radius: 999px; color: var(--sl6-green); background: var(--sl6-mint); font-size: 6px; font-weight: 600; white-space: nowrap; }

.sl6-phone-avatar { display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; color: var(--sl6-green); background: var(--sl6-mint-2); font-size: 6px; font-weight: 700; }

.sl6-phone-welcome { margin-top: 18px; }.sl6-phone-welcome small { color: rgba(23,60,39,.48); font-size: 6px; letter-spacing: .08em; }.sl6-phone-welcome h3 { margin: 4px 0 0; font-size: 18px; line-height: 1; font-weight: 500; letter-spacing: -.06em; }

.sl6-phone-total { position: relative; margin-top: 15px; padding: 11px 10px 10px; overflow: hidden; border-radius: 10px; color: #fff; background: var(--sl6-green); }.sl6-phone-total::after { content: ""; position: absolute; right: -25px; bottom: -29px; width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }.sl6-phone-total small { color: rgba(255,255,255,.68); font-size: 6px; letter-spacing: .08em; }.sl6-phone-total strong { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: -.06em; }.sl6-phone-total span { display: block; margin-top: 4px; color: rgba(255,255,255,.82); font-size: 6px; }.sl6-phone-total i { position: relative; z-index: 1; display: block; height: 3px; margin-top: 10px; border-radius: 99px; background: rgba(255,255,255,.27); }.sl6-phone-total i b { display: block; width: 72%; height: 100%; border-radius: inherit; background: #c9f7d1; }

.sl6-phone-due { display: flex; justify-content: space-between; margin: 15px 1px 7px; }.sl6-phone-due strong { font-size: 10px; font-weight: 600; }.sl6-phone-due small { color: var(--sl6-green); font-size: 7px; }

.sl6-phone-list { display: grid; gap: 5px; }.sl6-phone-list > div { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center; min-height: 39px; padding: 6px; border: 1px solid rgba(23,60,39,.1); border-radius: 7px; background: #fff; }.sl6-phone-list > div > span:first-child { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: #fff; font-size: 9px; font-weight: 700; }.sl6-phone-list .ok { background: var(--sl6-green); }.sl6-phone-list .warn { color: var(--sl6-green); background: #e8f8e9; }.sl6-phone-list .add { background: #84c98c; }.sl6-phone-list > div > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }.sl6-phone-list b { overflow: hidden; font-size: 7px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.sl6-phone-list small { overflow: hidden; color: rgba(23,60,39,.5); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }.sl6-phone-list > div > strong { color: var(--sl6-green); font-size: 6px; font-weight: 600; white-space: nowrap; }.sl6-phone-nav { position: absolute; right: 10px; bottom: 8px; left: 10px; display: flex; justify-content: space-around; padding-top: 7px; border-top: 1px solid rgba(23,60,39,.1); }.sl6-phone-nav span { display: grid; justify-items: center; gap: 2px; color: rgba(23,60,39,.38); font-size: 6px; }.sl6-phone-nav span.active { color: var(--sl6-green); }.sl6-phone-nav small { font-size: 6px; }.sl6-phone-nav span { font-size: 11px; }.sl6-phone-nav small { font-size: 6px; }

.sl6-rail { border-bottom: 1px solid var(--sl6-line); background: #fff; }.sl6-rail-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.sl6-rail-grid > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; min-height: 98px; padding: 20px 25px 20px 0; border-right: 1px solid var(--sl6-line); }.sl6-rail-grid > div + div { padding-left: 25px; }.sl6-rail-grid > div:last-child { border-right: 0; }.sl6-rail-grid span { grid-row: span 2; color: var(--sl6-green); font-size: 11px; font-weight: 600; }.sl6-rail-grid strong { font-size: 13px; font-weight: 600; }.sl6-rail-grid small { color: rgba(23,60,39,.55); font-size: 10px; }

.sl6-overview { padding: 125px 0; background: #fff; }.sl6-overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 92px; align-items: center; }.sl6-window-wrap { position: relative; }.sl6-window { overflow: hidden; border: 1px solid rgba(23,60,39,.14); border-radius: 14px; background: #fff; box-shadow: 0 22px 60px rgba(39,96,54,.1); }.sl6-window-bar { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border-bottom: 1px solid var(--sl6-line); }.sl6-window-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #c8e9ce; }.sl6-window-bar strong { margin-left: 10px; color: rgba(23,60,39,.6); font-size: 10px; font-weight: 500; }.sl6-window-bar i { margin-left: auto; padding: 5px 8px; border-radius: 999px; color: var(--sl6-green); background: var(--sl6-mint); font-size: 8px; font-style: normal; }.sl6-window-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px; }.sl6-window-stats > div { min-height: 94px; padding: 12px; border-radius: 9px; background: var(--sl6-mint); }.sl6-window-stats > div:nth-child(2) { color: #fff; background: var(--sl6-green); }.sl6-window-stats > div:nth-child(3) { background: #f7fbf6; }.sl6-window-stats small { display: block; color: rgba(23,60,39,.54); font-size: 7px; letter-spacing: .07em; }.sl6-window-stats > div:nth-child(2) small { color: rgba(255,255,255,.68); }.sl6-window-stats strong { display: block; margin-top: 11px; font-size: 18px; font-weight: 600; letter-spacing: -.05em; }.sl6-window-stats b { display: block; margin-top: 6px; color: var(--sl6-green); font-size: 8px; font-weight: 500; }.sl6-window-stats > div:nth-child(2) b { color: rgba(255,255,255,.8); }.sl6-window-table { margin: 0 15px 15px; overflow: hidden; border: 1px solid var(--sl6-line); border-radius: 9px; }.sl6-window-table > div { display: grid; grid-template-columns: 1fr 1fr 58px 75px; gap: 10px; align-items: center; min-height: 42px; padding: 0 12px; border-top: 1px solid rgba(23,60,39,.1); font-size: 9px; }.sl6-window-table > div:first-child { border-top: 0; }.sl6-window-table .table-head { min-height: 31px; color: rgba(23,60,39,.5); background: #fbfdfb; font-size: 7px; text-transform: uppercase; }.sl6-window-table span { color: rgba(23,60,39,.56); }.sl6-window-table strong { font-size: 9px; font-weight: 600; }.sl6-window-table em { padding: 4px 5px; border-radius: 999px; color: var(--sl6-green); background: var(--sl6-mint); font-size: 7px; font-style: normal; text-align: center; }.sl6-window-table em.due { color: #a26b20; background: #fff6e8; }.sl6-window-table em.new { color: #4e75a1; background: #eef6ff; }.sl6-window-table b { color: var(--sl6-ink); font-size: 8px; font-weight: 600; text-align: right; }.sl6-window-caption { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: rgba(23,60,39,.55); font-size: 10px; }.sl6-window-caption span { width: 7px; height: 7px; border-radius: 50%; background: var(--sl6-green-bright); }

.sl6-overview-copy { max-width: 425px; }.sl6-overview h2, .sl6-story h2, .sl6-section-heading h2, .sl6-process h2, .sl6-cta h2 { margin: 0; font-size: clamp(40px, 4.6vw, 62px); line-height: .99; font-weight: 600; letter-spacing: -.075em; }.sl6-overview-copy > p:not(.sl6-overline) { margin: 24px 0 0; color: rgba(23,60,39,.64); font-size: 15px; line-height: 1.65; }.sl6-checks { display: grid; gap: 14px; margin-top: 29px; }.sl6-checks div { display: flex; align-items: center; gap: 10px; }.sl6-checks span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--sl6-green); font-size: 10px; }.sl6-checks strong { font-size: 12px; font-weight: 500; }.sl6-overview-copy .sl6-link { margin-top: 31px; }

.sl6-story { padding: 112px 0 120px; background: var(--sl6-mint); }.sl6-story-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 85px; align-items: center; }.sl6-story-copy { max-width: 420px; }.sl6-story-copy > p:not(.sl6-overline) { margin: 24px 0 0; color: rgba(23,60,39,.66); font-size: 15px; line-height: 1.65; }.sl6-story-copy .sl6-link { margin-top: 28px; }.sl6-story-image { position: relative; min-height: 400px; overflow: hidden; border-radius: 16px; background: var(--sl6-mint-2); }.sl6-story-image img { width: 100%; height: 100%; min-height: 400px; display: block; object-fit: cover; object-position: 58% center; }.sl6-story-image > div { position: absolute; right: 16px; bottom: 16px; left: 16px; display: grid; gap: 8px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.38); border-radius: 10px; color: #fff; background: rgba(23,60,39,.76); backdrop-filter: blur(8px); }.sl6-story-image small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.sl6-story-image strong { font-size: 21px; line-height: .98; font-weight: 500; letter-spacing: -.05em; }

.sl6-solutions { padding: 122px 0; background: #fff; }.sl6-section-heading { display: grid; grid-template-columns: 1fr .67fr; gap: 60px; align-items: end; margin-bottom: 51px; }.sl6-section-heading > p { max-width: 320px; margin: 0 0 4px; color: rgba(23,60,39,.64); font-size: 15px; line-height: 1.6; }.sl6-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sl6-line); border-left: 1px solid var(--sl6-line); }.sl6-feature-grid article { position: relative; display: flex; flex-direction: column; min-height: 305px; padding: 22px; border-right: 1px solid var(--sl6-line); border-bottom: 1px solid var(--sl6-line); }.sl6-feature-grid article:nth-child(2) { background: var(--sl6-mint); }.sl6-feature-grid article:nth-child(3) { color: #fff; background: var(--sl6-green); }.sl6-feature-grid article:nth-child(4) { background: #f8fbf7; }.sl6-feature-no { color: rgba(23,60,39,.5); font-size: 10px; font-weight: 600; }.sl6-feature-grid article:nth-child(3) .sl6-feature-no { color: rgba(255,255,255,.7); }.sl6-feature-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 50px; border-radius: 11px; color: #fff; background: var(--sl6-green); font-size: 15px; }.sl6-feature-grid article:nth-child(3) .sl6-feature-icon { color: var(--sl6-green); background: #fff; }.sl6-feature-grid h3 { margin: 17px 0 9px; font-size: 21px; font-weight: 500; letter-spacing: -.05em; }.sl6-feature-grid p { margin: 0; color: rgba(23,60,39,.63); font-size: 13px; line-height: 1.55; }.sl6-feature-grid article:nth-child(3) p { color: rgba(255,255,255,.78); }.sl6-feature-grid a { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(23,60,39,.15); color: var(--sl6-green); font-size: 11px; font-weight: 600; }.sl6-feature-grid article:nth-child(3) a { color: #fff; border-color: rgba(255,255,255,.25); }

.sl6-process { padding: 116px 0 122px; background: var(--sl6-ink); color: #fff; }.sl6-process-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 105px; }.sl6-process .sl6-overline { color: var(--sl6-green-bright); }.sl6-process h2 em { color: var(--sl6-green-bright); }.sl6-process > .sl6-shell > div:first-child > p:not(.sl6-overline) { max-width: 300px; margin: 23px 0 0; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.6; }.sl6-process .sl6-btn { margin-top: 29px; }.sl6-process-list { display: grid; }.sl6-process-list article { display: grid; grid-template-columns: 43px 1fr 25px; gap: 17px; align-items: start; padding: 21px 0; border-top: 1px solid rgba(255,255,255,.19); }.sl6-process-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.19); }.sl6-process-list article > span { color: var(--sl6-green-bright); font-size: 11px; font-weight: 600; }.sl6-process-list h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }.sl6-process-list p { margin: 7px 0 0; color: rgba(255,255,255,.54); font-size: 13px; }.sl6-process-list b { color: rgba(255,255,255,.5); font-size: 16px; font-weight: 400; }

.sl6-cta { padding: 120px 0 127px; text-align: center; background: #fff; }.sl6-cta .sl6-overline { justify-content: center; }.sl6-cta > .sl6-shell > p:not(.sl6-overline) { max-width: 400px; margin: 24px auto 0; color: rgba(23,60,39,.64); font-size: 15px; line-height: 1.6; }.sl6-cta > .sl6-shell > div { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 31px; }.sl6-footer { color: #fff; background: var(--sl6-green); }.sl6-footer-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; min-height: 94px; }.sl6-footer .sl6-brand { color: #fff; }.sl6-footer p { margin: 0; color: rgba(255,255,255,.77); font-size: 11px; }.sl6-footer-grid > div { display: flex; align-items: center; gap: 19px; }.sl6-footer-grid > div a, .sl6-footer-grid > div span { color: rgba(255,255,255,.84); font-size: 11px; }

@media (max-width: 1000px) { .sl6-hero-grid { grid-template-columns: .88fr 1.12fr; gap: 18px; }.sl6-overview-grid { gap: 44px; }.sl6-process-grid { gap: 50px; }.sl6-product-phone { right: 5%; transform: rotate(5deg) scale(.91); } }

@media (max-width: 800px) { .sl6-shell { width: min(100% - 40px, 560px); }.sl6-nav-inner { grid-template-columns: auto auto; justify-content: space-between; min-height: 72px; }.sl6-links, .sl6-actions > a:first-child { display: none; }.sl6-actions { gap: 0; }.sl6-actions .sl6-btn { min-height: 40px; padding: 10px 14px; font-size: 12px; }.sl6-hero-grid { grid-template-columns: 1fr; gap: 31px; padding-top: 45px; padding-bottom: 48px; }.sl6-hero-copy { max-width: 600px; }.sl6-hero h1 { font-size: 58px; }.sl6-hero-signoff { margin-top: 39px; }.sl6-hero-art { min-height: 465px; }.sl6-product-phone { right: 4%; bottom: 2%; transform: rotate(4deg) scale(.82); transform-origin: right bottom; }.sl6-art-stat { right: 2%; bottom: 5%; }.sl6-art-tag { right: 7%; }.sl6-rail-grid { grid-template-columns: 1fr; }.sl6-rail-grid > div, .sl6-rail-grid > div + div { min-height: 76px; padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--sl6-line); }.sl6-rail-grid > div:last-child { border-bottom: 0; }.sl6-overview, .sl6-solutions { padding: 80px 0; }.sl6-overview-grid, .sl6-story-grid, .sl6-process-grid { grid-template-columns: 1fr; gap: 42px; }.sl6-window { max-width: 620px; }.sl6-story { padding: 80px 0; }.sl6-section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 34px; }.sl6-feature-grid { grid-template-columns: 1fr 1fr; }.sl6-process { padding: 80px 0; }.sl6-cta { padding: 82px 0 90px; }.sl6-cta > .sl6-shell > div { flex-direction: column; gap: 19px; }.sl6-footer-grid { grid-template-columns: 1fr; gap: 13px; padding: 25px 0; } }

@media (max-width: 520px) { .sl6-shell { width: min(100% - 32px, 440px); }.sl6-hero h1 { font-size: 47px; }.sl6-lead { font-size: 15px; }.sl6-hero-art { min-height: 366px; }.sl6-product-phone { right: 2%; bottom: 0; transform: rotate(3deg) scale(.69); }.sl6-art-stat { right: 0; transform: scale(.88); transform-origin: right bottom; }.sl6-art-tag { top: 0; right: 2%; transform: scale(.9); transform-origin: right top; }.sl6-window-stats { grid-template-columns: 1fr; }.sl6-window-stats > div { min-height: 70px; }.sl6-window-table > div { grid-template-columns: 1fr 1fr 50px; }.sl6-window-table > div > span:nth-child(2) { display: none; }.sl6-window-table > div > b { display: none; }.sl6-feature-grid { grid-template-columns: 1fr; }.sl6-feature-grid article { min-height: 270px; }.sl6-overview h2, .sl6-story h2, .sl6-section-heading h2, .sl6-process h2, .sl6-cta h2 { font-size: 43px; } }



/* Final premium polish: brighter KISMART green, white-first composition, and quieter editorial rhythm. */

.sl6-land { --sl6-ink: #102118; --sl6-ink-soft: #486455; --sl6-green: #102118; --sl6-green-bright: #102118; --sl6-mint: #f4fbf5; --sl6-mint-2: #e4f7e7; --sl6-line: rgba(16,33,24,.13); background: #fff; }

.sl6-nav { background: rgba(255,255,255,.94); border-bottom-color: rgba(16,33,24,.11); backdrop-filter: blur(14px); }

.sl6-brand { color: var(--sl6-ink); }

.sl6-links a, .sl6-actions > a:first-child { color: rgba(16,33,24,.64); }

.sl6-links a:hover, .sl6-actions > a:first-child:hover { color: var(--sl6-green); }

.sl6-hero { background: #fff; }

.sl6-hero-grid { min-height: 650px; padding-top: 72px; padding-bottom: 72px; }

.sl6-hero-copy { max-width: 560px; }

.sl6-overline { letter-spacing: .16em; font-weight: 700; }

.sl6-hero h1 { max-width: 610px; color: var(--sl6-ink); font-weight: 500; letter-spacing: -.075em; }

.sl6-hero h1 em, .sl6-overview h2 em, .sl6-story h2 em, .sl6-section-heading h2 em, .sl6-process h2 em, .sl6-cta h2 em { color: var(--sl6-green); }

.sl6-lead { max-width: 470px; color: rgba(16,33,24,.63); }

.sl6-hero-art { min-height: 540px; }

.sl6-art-backdrop { inset: 8% 2% 0 8%; background: linear-gradient(145deg, #effaf0, #dff4e3); }

.sl6-art-frame { inset: 5% 2% 4% 4%; border-width: 10px; border-radius: 26px; box-shadow: 0 28px 70px rgba(25,94,49,.16); }

.sl6-product-phone { right: 8%; width: 198px; height: 404px; border-radius: 31px; background: #143c26; box-shadow: 0 24px 44px rgba(16,66,34,.28), 0 4px 0 rgba(16,66,34,.12); }

.sl6-art-stat { right: -2%; bottom: 9%; padding: 17px 19px; border-radius: 14px; box-shadow: 0 18px 36px rgba(25,94,49,.16); }

.sl6-rail { background: var(--sl6-ink); border-bottom: 0; }

.sl6-rail-grid > div { border-color: rgba(255,255,255,.14); }

.sl6-rail-grid strong { color: #fff; }

.sl6-rail-grid small { color: rgba(255,255,255,.58); }

.sl6-overview { padding-top: 136px; padding-bottom: 136px; }

.sl6-window { border-radius: 18px; box-shadow: 0 26px 72px rgba(25,94,49,.12); }

.sl6-window-stats > div:nth-child(2) { background: var(--sl6-green); }

.sl6-story { padding-top: 128px; padding-bottom: 128px; background: var(--sl6-mint); }

.sl6-story-image, .sl6-intro-art { border-radius: 20px; }

.sl6-solutions { padding-top: 132px; padding-bottom: 132px; }

.sl6-section-heading h2, .sl6-overview h2, .sl6-story h2, .sl6-process h2, .sl6-cta h2 { font-weight: 500; }

.sl6-feature-grid { border-color: var(--sl6-line); }

.sl6-feature-grid article { min-height: 320px; padding: 26px; border-color: var(--sl6-line); }

.sl6-feature-grid article:nth-child(2) { background: #f4fbf5; }

.sl6-feature-grid article:nth-child(3) { background: var(--sl6-green); }

.sl6-feature-grid h3 { font-weight: 500; }

.sl6-process { padding-top: 128px; padding-bottom: 136px; background: var(--sl6-ink); }

.sl6-cta { padding-top: 132px; padding-bottom: 138px; background: #fff; }

.sl6-footer { background: var(--sl6-green); }

@media (max-width: 800px) {

  .sl6-hero-grid { padding-top: 58px; padding-bottom: 62px; }

  .sl6-hero h1 { font-size: 56px; }

  .sl6-hero-art { min-height: 440px; }

  .sl6-product-phone { width: 178px; height: 365px; }

  .sl6-overview, .sl6-solutions, .sl6-story, .sl6-process { padding-top: 88px; padding-bottom: 88px; }

}

@media (max-width: 520px) {

  .sl6-nav-inner { min-height: 68px; }

  .sl6-hero-grid { padding-top: 48px; padding-bottom: 54px; }

  .sl6-hero h1 { font-size: 46px; }

  .sl6-hero-art { min-height: 366px; }

  .sl6-product-phone { width: 170px; height: 350px; right: 1%; }

  .sl6-art-frame { left: 0; }

  .sl6-rail-grid > div, .sl6-rail-grid > div + div { padding-left: 0; }

}



/* Hero refinement: let the product photograph lead, with the rail green as the single accent. */

.sl6-product-phone { display: none; }

.sl6-hero-art { min-height: 520px; }

.sl6-art-frame { right: 0; }

.sl6-hero h1 em, .sl6-hero .sl6-overline, .sl6-hero .sl6-link-green { color: #102118; }

.sl6-hero .sl6-btn-green { color: #fff; background: #102118; box-shadow: 0 12px 24px rgba(16,33,24,.2); }

.sl6-hero .sl6-btn-green:hover { background: #1d3328; }

.sl6-hero-signoff .sl6-signoff-mark { color: #fff; background: #102118; }

.sl6-art-stat span { color: #102118; }

@media (max-width: 800px) { .sl6-hero-art { min-height: 410px; } }

@media (max-width: 520px) { .sl6-hero-art { min-height: 350px; } }



/* Full-bleed bands and consistently white admin CTA copy. */

.sl6-rail, .sl6-process { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.sl6-rail { background: #102118; }

.sl6-process { background: #102118; }

.sl6-actions .sl6-btn, .sl6-actions .sl6-btn:hover, .sl6-actions .sl6-btn:focus, .sl6-actions .sl6-btn:active, .sl6-cta .sl6-btn, .sl6-cta .sl6-btn:hover, .sl6-cta .sl6-btn:focus, .sl6-cta .sl6-btn:active { color: #fff !important; }

.sl6-actions .sl6-btn-green, .sl6-cta .sl6-btn-green { background: #102118; border-color: #102118; }

.sl6-actions .sl6-btn-green:hover, .sl6-cta .sl6-btn-green:hover { background: #1d3328; border-color: #1d3328; }



/* Compact navigation with edge-aligned mobile admin action. */

.sl6-nav-inner { min-height: 68px; }

.sl6-shell { width: min(1120px, calc(100% - 48px)); }

.sl6-nav .sl6-shell { width: min(1120px, calc(100% - 40px)); }

.sl6-nav .sl6-actions { justify-self: end; }

@media (max-width: 800px) {

  .sl6-nav-inner { min-height: 62px; width: calc(100% - 24px); }

  .sl6-nav .sl6-shell { width: calc(100% - 24px); }

  .sl6-nav .sl6-actions { justify-self: end; margin-left: auto; }

  .sl6-nav .sl6-actions .sl6-btn { min-height: 38px; padding: 9px 13px; }

  .sl6-nav-inner { justify-content: start; gap: 20px; }

  .sl6-nav .sl6-actions { justify-self: start; margin-left: 0; }

}



/* Reference-match correction: logo left, Open admin at the far-right arrow position. */

@media (max-width: 800px) {

  .sl6-nav { position: relative; }

  .sl6-nav-inner { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; padding-right: 0; }

  .sl6-nav .sl6-actions { position: fixed !important; top: 12px !important; right: 12px !important; left: auto !important; z-index: 9999; display: flex; justify-self: auto; margin: 0 !important; transform: none !important; }

}



/* Admin dashboard responsive system: Outfit type, no horizontal overflow, touch-sized controls. */

.ks-dash { font-family: "Outfit", Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; }

.ks-dash *, .ks-dash button, .ks-dash input, .ks-dash select, .ks-dash textarea { font-family: inherit; }

.ks-dash .shell { width: 100%; min-width: 0; }

.ks-dash main { min-width: 0; overflow: hidden; }

.ks-dash .dash-header { min-width: 0; }

.ks-dash .controls { min-width: 0; }

.ks-dash .table-wrap, .ks-dash .table-scroll, .ks-dash .panel-body { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ks-dash table { min-width: 640px; }

@media (max-width: 900px) {

  .ks-dash .shell { grid-template-columns: 1fr; }

  .ks-dash aside { position: sticky; top: 0; z-index: 30; width: 100%; height: auto; min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #0a0a0a; }

  .ks-dash .brand { flex: 0 0 auto; gap: 2px; padding: 0 14px 0 0; border: 0; }

  .ks-dash .brand > span { display: none; }

  .ks-dash aside nav { display: flex; flex: 1 1 auto; gap: 6px; min-width: max-content; overflow-x: auto; }

  .ks-dash aside nav button { min-height: 42px; padding: 9px 11px; white-space: nowrap; }

  .ks-dash .side-status { display: none; }

  .ks-dash main { padding: 18px 16px 28px; }

  .ks-dash .dash-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; padding-bottom: 14px; }

  .ks-dash .controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); gap: 8px; }

  .ks-dash .controls input { grid-column: 1 / -1; width: 100%; min-height: 42px; }

  .ks-dash .controls select, .ks-dash .controls .btn, .ks-dash .controls .logout-form { width: 100%; min-width: 0; }

  .ks-dash .controls .btn, .ks-dash .controls .logout-form .btn { min-height: 42px; }

  .ks-dash .command-band { grid-template-columns: 1fr; }

  .ks-dash .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ks-dash .window-grid, .ks-dash .chart-grid, .ks-dash .two-column, .ks-dash .form-grid { grid-template-columns: 1fr; }

  .ks-dash .panel, .ks-dash .metric, .ks-dash .health-panel, .ks-dash .chart-panel { min-width: 0; }

}

@media (max-width: 560px) {

  .ks-dash aside { padding: 10px 12px; }

  .ks-dash .brand-word { font-size: 17px; }

  .ks-dash aside nav button { min-height: 40px; padding: 8px 10px; font-size: 12px; }

  .ks-dash main { padding: 14px 12px 24px; }

  .ks-dash h1 { font-size: 24px; }

  .ks-dash h2 { font-size: 17px; }

  .ks-dash .controls { grid-template-columns: 1fr 1fr; }

  .ks-dash .controls .logout-form { grid-column: 1 / -1; }

  .ks-dash .metric-grid, .ks-dash .health-strip { grid-template-columns: 1fr; }

  .ks-dash .metric, .ks-dash .health-panel, .ks-dash .panel, .ks-dash .chart-panel { border-radius: 12px; }

  .ks-dash .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  .ks-dash .panel-head .actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }

  .ks-dash .panel-head .actions .btn, .ks-dash .panel-head .actions .tiny { flex: 1 1 auto; }

  .ks-dash .form-actions { flex-wrap: wrap; }

  .ks-dash .form-actions .btn { flex: 1 1 100%; }

  .ks-dash .table-wrap, .ks-dash .table-scroll { margin-inline: -2px; }

}



/* Contract detail page */

.cd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

.cd-top-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cd-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border: 1px solid #d5e0d9; border-radius: 12px; color: #14201a; background: #ffffff; box-shadow: none; }
.cd-hero-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cd-avatar { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; border: 1px solid #d5e0d9; border-radius: 12px; background: #f4f7f5; color: #0d6b45; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.cd-hero-eyebrow { margin: 0; color: #5a6b62; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.cd-hero h2 { margin: 5px 0 0; color: #14201a; font-size: 24px; line-height: 1.1; font-weight: 700; overflow-wrap: anywhere; }
.cd-hero-meta { margin: 7px 0 0; color: #6f7a75; font-size: 13px; }
.cd-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 12px; border: 1px solid #d5e0d9; border-radius: 999px; background: #ffffff; color: #14201a; font-size: 12px; font-weight: 650; white-space: nowrap; }
.cd-chip.soft { border-color: #d5e0d9; background: #f4f7f5; color: #5a6b62; }
.cd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }

.cd-kpi { position: relative; overflow: hidden; padding: 16px 18px; border: 1px solid #d5e0d9; border-radius: 12px; background: #ffffff; box-shadow: 0 6px 18px rgba(13, 31, 23, .04); }

.cd-kpi::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #8b8b82; opacity: .5; }

.cd-kpi span { display: block; color: #5a6b62; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.cd-kpi strong { display: block; margin: 10px 0 6px; color: #14201a; font-size: 21px; line-height: 1.05; font-weight: 700; overflow-wrap: anywhere; }

.cd-kpi small { color: #6f7a75; font-size: 12px; }

.cd-kpi.green::after { background: #0d6b45; opacity: 1; }

.cd-kpi.green strong { color: #0b5a3a; }

.cd-kpi.accent::after { background: #159a5f; opacity: 1; }

.cd-kpi.accent strong { color: #0d6b45; }

.cd-kpi.red::after { background: #9b2c2c; opacity: 1; }

.cd-kpi.red strong { color: #9b2c2c; }

.cd-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; align-items: start; }

.cd-col { display: grid; gap: 16px; min-width: 0; }

.cd-card { padding: 18px; border: 1px solid #d5e0d9; border-radius: 12px; background: #ffffff; box-shadow: 0 6px 18px rgba(13, 31, 23, .04); }

.cd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.cd-card-head h3 { margin: 0; color: #14201a; font-size: 14px; font-weight: 700; }

.cd-pill { padding: 4px 10px; border: 1px solid #b7dfc9; border-radius: 999px; background: #e7f3ed; color: #0b5a3a; font-size: 12px; font-weight: 700; white-space: nowrap; }

.cd-rows { display: grid; }

.cd-row { display: grid; grid-template-columns: minmax(104px, 38%) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid #edf1ee; }

.cd-row:first-child { border-top: 0; padding-top: 0; }

.cd-row span { color: #6f7a75; font-size: 12px; }

.cd-row strong { color: #14201a; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

.cd-track { height: 9px; overflow: hidden; border-radius: 999px; background: #e7f3ed; }

.cd-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0d6b45, #159a5f); }

.cd-progress-meta { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 14px; color: #6f7a75; font-size: 12px; }

.cd-progress-meta strong { color: #14201a; font-weight: 700; }

.cd-payment-list, .cd-note-list { display: grid; }

.cd-payment { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #edf1ee; }

.cd-payment:first-child { border-top: 0; padding-top: 0; }

.cd-payment strong { display: block; color: #14201a; font-size: 14px; font-weight: 700; }

.cd-payment span { color: #6f7a75; font-size: 12px; }

.cd-payment-side { display: flex; align-items: center; gap: 10px; }

.cd-note { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid #edf1ee; }

.cd-note:first-child { border-top: 0; padding-top: 0; }

.cd-note strong { color: #14201a; font-size: 13px; font-weight: 600; }

.cd-note span { color: #4a564f; font-size: 12px; }

.cd-note small { color: #839089; font-size: 11px; }

.cd-empty { padding: 4px 0; color: #839089; font-size: 13px; }

.cd-actions-card { margin-top: 16px; }

.cd-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cd-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.cd-doc strong { color: #14201a; font-size: 13px; font-weight: 600; }

.cd-doc span { color: #6f7a75; font-size: 12px; }



@media (max-width: 980px) {

  .cd-grid { grid-template-columns: 1fr; }

  .cd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 560px) {

  .cd-kpis { grid-template-columns: 1fr; }

  .cd-hero { padding: 18px; }

  .cd-hero h2 { font-size: 20px; }

  .cd-row { grid-template-columns: 1fr; gap: 3px; }

  .cd-top-actions .btn { flex: 1 1 auto; }

}