/* Public landing. All illustration data is static and isolated from the ERP. */
.landing { --landing-ink:#111b30; --landing-muted:#52657a; --landing-accent:#0088a4; position:relative; isolation:isolate; width:100%; min-width:0; min-height:100svh; color:var(--landing-ink); color-scheme:light; background:linear-gradient(155deg,#eefbff 0%,#fffdf8 42%,#fffaf0 72%,#f5fbff 100%); font-family:"Inter","Segoe UI",system-ui,sans-serif; line-height:1.5; }
.landing-page { position:relative; max-width:1300px; padding:0 clamp(20px,4vw,56px); margin:auto; }
.landing-ambience { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.landing-orb { position:absolute; width:700px; height:700px; border-radius:50%; opacity:.65; background:radial-gradient(circle,#42d8ef60,transparent 65%); }
.landing-orb-one { top:-310px; left:-280px; }
.landing-orb-two { top:350px; right:-260px; background:radial-gradient(circle,#f5c47d55,#ffe4ba25 38%,transparent 68%); }
.landing-header { min-height:94px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid #d8e6eb; }
.landing-brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.landing-brand img { width:48px; height:48px; object-fit:contain; }
.landing-brand strong { display:block; font-size:24px; font-weight:800; letter-spacing:-.9px; line-height:1.15; }
.landing-brand span { display:block; margin-top:4px; font-size:9px; color:#00829d; letter-spacing:2.4px; font-weight:750; }
.landing-header-access { display:flex; align-items:center; }
.landing .landing-button { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:23px; min-height:48px; padding:13px 23px; border:1px solid transparent; border-radius:14px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; }
.landing .landing-button-dark { min-height:44px; padding:10px 21px; background:#111b30; color:white; border-radius:24px; }
.landing .landing-button-primary { background:#008ba8; color:white; box-shadow:0 10px 22px -9px #00a0bf70; }
.landing .landing-button:hover { background:#006e87; color:white; }
.landing :is(button,a,input):focus-visible { outline:3px solid #008ba8; outline-offset:3px; }
.landing-hero { padding:34px 0 30px; }
.landing-intro { text-align:center; max-width:900px; margin:0 auto 32px; }
.landing-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border:1px solid #aee5ed; border-radius:24px; background:#f5feffc9; color:#007e99; font-size:10px; font-weight:750; letter-spacing:1.8px; text-transform:uppercase; }
.landing-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#04bad0; box-shadow:0 0 0 4px #04bad012; }
.landing h1 { margin:17px 0 16px; font-size:clamp(38px,4.8vw,58px); line-height:1.07; font-weight:800; letter-spacing:-2.8px; color:var(--landing-ink); }
.landing h1 > span { color:#009db8; background:linear-gradient(110deg,#008aac,#00b4c6 55%,#008aac); background-size:180% 100%; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.landing-description { max-width:650px; margin:auto; font-size:16px; line-height:1.8; color:var(--landing-muted); }
.landing-access { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:20px; margin-top:20px; }
.landing-recovery-unavailable { display:flex; flex-direction:column; align-items:center; gap:5px; }
.landing .landing-recovery { min-height:48px; padding:12px 21px; border:1px solid #dcd8d0; border-radius:13px; background:#f8f6f1; font:inherit; font-size:13px; font-weight:600; color:#8b8d91; cursor:not-allowed; }
.landing-recovery-unavailable small { font-size:10px; color:#7c7e83; }
.landing-platforms { display:flex; align-items:center; justify-content:center; gap:8px; color:#6c7d88; font-size:11px; margin-top:12px; }
.landing-platforms svg { width:21px; height:21px; flex-shrink:0; }
.landing-icon { width:19px; height:19px; flex-shrink:0; }
.landing-notice { margin-top:20px; padding:14px 20px; background:#e9f8f0; border:1px solid #bcdcc9; border-radius:10px; color:#206646; font-size:14px; }
/* A recognizable miniature of the current ERP, with a warmer frame around it. */
.landing-preview { width:100%; max-width:1120px; margin:0 auto; position:relative; min-width:0; }
.landing-demo-stage { position:relative; padding:17px; background:#f7eedf; background-image:linear-gradient(#bda77f13 1px,transparent 1px),linear-gradient(90deg,#bda77f13 1px,transparent 1px); background-size:26px 26px; border:1px solid #e6d8c1; border-radius:29px; box-shadow:0 27px 60px -35px #7356314d; }
.landing-demo-stage::before { content:""; position:absolute; inset:-8px 13px 9px; z-index:-1; border:1px solid #e8d8bb; border-radius:30px; transform:rotate(-1deg); background:#fffcf5; }
.landing-preview-surface { overflow:hidden; position:relative; border:1px solid #ccd6df; border-radius:14px; background:white; box-shadow:0 13px 28px -18px #20374d50; }
.landing-preview-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 15px; background:#fffdfa; border-bottom:1px solid #dfe3e7; color:#637283; font-size:10px; }
.landing-window-dots { display:flex; gap:5px; }
.landing-window-dots i { width:7px; height:7px; border-radius:50%; background:#d8dddf; }
.landing-window-dots i:first-child { background:#edc481; }
.landing-window-dots i:nth-child(2) { background:#9dd8d8; }
.landing-demo-badge { color:#7f7767; font-size:8px; letter-spacing:1px; }
.demo-app { display:grid; grid-template-columns:135px minmax(0,1fr); font-size:10px; color:#172239; background:#f6f6f8; }
.demo-sidebar { display:flex; flex-direction:column; gap:8px; padding:13px 9px; color:#bed0da; background:#062731; }
.demo-brand { display:flex; align-items:center; gap:8px; margin:3px 6px 10px; color:#fff; font-weight:700; font-size:12px; }
.demo-brand img { width:28px; height:28px; object-fit:contain; }
.demo-user { border:1px solid #ffffff1c; border-radius:12px; padding:10px; margin-bottom:6px; background:#ffffff05; }
.demo-user strong { display:block; color:#e5f0f7; font-size:10px; }
.demo-user span { display:block; color:#8fb5c4; font-size:8px; margin-top:3px; }
.demo-sidebar-menu { display:flex; flex-direction:column; gap:5px; }
.demo-sidebar-menu > span { display:flex; align-items:center; gap:8px; padding:8px 7px; border:1px solid transparent; border-radius:10px; font-size:10px; }
.demo-sidebar-menu .demo-icon { width:15px; height:15px; }
.demo-sidebar-menu > span:nth-child(1) .demo-icon { color:#d6c46b; }
.demo-sidebar-menu > span:nth-child(3) .demo-icon { color:#dda7ae; }
.demo-sidebar-menu > span:nth-child(5) .demo-icon { color:#e0c16c; }
.landing[data-demo-phase="0"] .demo-nav-sales,.landing[data-demo-phase="1"] .demo-nav-sales,.landing[data-demo-phase="2"] .demo-nav-sales,.landing[data-demo-phase="3"] .demo-nav-products { color:#24d7e9; border-color:#218ca05e; background:#0a3541; }
.demo-main { min-width:0; }
.demo-app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 17px; background:#fff; border-bottom:1px solid #eef0f3; min-height:74px; }
.demo-app-header p { color:#60728b; font-size:9px; }
.demo-app-header strong { display:block; font-size:11px; }
.demo-warehouse { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:3px 7px; border:1px solid #e1e3e7; border-radius:15px; font-size:7px; letter-spacing:1px; }
.demo-warehouse::before { content:""; width:5px; height:5px; border-radius:50%; background:#10b981; }
.demo-company { min-width:160px; padding:8px 12px; border:1px solid #d9dde3; border-radius:11px; background:white; box-shadow:0 1px 2px #0f172a10; }
.demo-company small { display:block; font-size:7px; color:#586d87; letter-spacing:1px; }
.demo-company strong { font-size:9px; }
.demo-company span { font-size:8px; color:#687a90; }
.demo-screen-stack { position:relative; height:550px; overflow:auto; }
.demo-screen { min-height:100%; padding:17px; }
.demo-screen[hidden] { display:none !important; }
.demo-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
.demo-heading h2 { font-size:18px; font-weight:800; line-height:1.2; letter-spacing:-.35px; }
.demo-heading p { font-size:9px; margin-top:4px; color:#5e6b85; }
.demo-heading > div > small { display:block; font-size:9px; color:#63728a; margin-bottom:3px; }
.demo-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:5px; }
.demo-button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:26px; padding:6px 9px; border:1px solid #cdd3dd; border-radius:14px; background:#fff; color:#2f4660; font-size:9px; font-weight:600; line-height:1.1; white-space:nowrap; }
button.demo-button { cursor:pointer; }
button.demo-button:hover { box-shadow:0 0 0 3px #0f99b11c; }
.demo-button .demo-icon { width:11px; height:11px; }
.demo-button--primary { background:#08849c; color:white; border-color:#08849c; }
.demo-button--soft { background:#e3f7fc; color:#00819e; border-color:#79c5d4; }
.demo-button--warning { background:#fff8e8; color:#9c4c18; border-color:#efc675; }
.demo-button--success { background:#eefcf5; color:#028561; border-color:#9ee4c9; }
.demo-button--danger { background:#fff2f4; color:#e52349; border-color:#f4bcc6; }
.demo-panel { border:1px solid #d5d8df; border-radius:13px; background:#fff; box-shadow:0 2px 3px #0f172a08; overflow:hidden; }
.demo-filters { display:grid; grid-template-columns:1.5fr repeat(3,1fr) auto; gap:8px; align-items:end; padding:12px; margin-bottom:14px; }
.demo-field { min-width:0; }
.demo-field > span:first-child { display:block; font-size:9px; color:#354763; font-weight:500; margin-bottom:5px; }
.demo-value { display:block; min-height:29px; padding:7px 8px; border:1px solid #d2d5de; border-radius:8px; background:#fff; color:#36445e; font-size:9px; line-height:1.4; }
.demo-value--muted { background:#f4f4f6; }
.demo-filters .demo-button { border-radius:8px; min-height:29px; }
.demo-table { width:100%; border-collapse:collapse; text-align:left; font-size:9px; }
.demo-table th { background:#eeeef1; color:#27374b; font-weight:600; white-space:nowrap; padding:9px; }
.demo-table td { border-top:1px solid #d9dbe2; padding:12px 9px; vertical-align:middle; }
.demo-table tbody tr:nth-child(even) { background:#f7f7f9; }
.demo-table td strong { font-weight:600; }
.demo-cell-detail { display:block; margin-top:4px; color:#6b6e7d; font-size:8px; }
.demo-number { white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.demo-pill { display:inline-block; padding:2px 5px; border-radius:8px; font-size:7px; line-height:1.5; letter-spacing:.45px; white-space:nowrap; }
.demo-pill--success { color:#08795e; background:#cdf9e7; }
.demo-pill--warning { color:#a4510a; background:#fff1d9; border:1px solid #f6d69c; }
.demo-pill--neutral { color:#626776; background:#eeeef1; }
.demo-pill--info { color:#007bb6; background:#e0f2ff; }
.demo-pill--violet { color:#9260aa; background:#f4e9fe; }
.demo-actions { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.demo-actions .demo-button { padding:5px 7px; font-size:8px; min-height:23px; }
.demo-pagination { margin-top:11px; color:#647287; font-size:8px; }
.demo-pos-sheet { background:white; border:1px solid #d5d8df; border-radius:17px; overflow:hidden; box-shadow:0 5px 12px #12233808; }
.demo-pos-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #d5d8df; }
.demo-pos-heading small { font-size:8px; letter-spacing:1.3px; color:#5c6e87; }
.demo-pos-heading h2 { margin-top:5px; font-size:15px; font-weight:800; line-height:1.2; }
.demo-totals { display:flex; gap:5px; flex-shrink:0; }
.demo-total { min-width:58px; padding:7px 9px; background:#fff; border:1px solid #d5d8df; border-radius:8px; }
.demo-total span { display:block; font-size:7px; letter-spacing:1px; color:#5f7287; text-transform:uppercase; }
.demo-total strong { display:block; margin-top:4px; font-size:15px; font-weight:750; line-height:1.2; }
.demo-total--emphasis { background:#062731; color:white; border-color:#062731; }
.demo-total--emphasis span { color:#29d8eb; }
.demo-pos-fields { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; padding:12px 14px; border-bottom:1px solid #d5d8df; }
.demo-pos-detail { padding:12px 14px; }
.demo-pos-detail .demo-heading { margin-bottom:8px; }
.demo-pos-detail h3,.demo-payment h3 { font-size:12px; font-weight:700; }
.demo-pos-detail .demo-table th { font-size:7px; font-weight:500; letter-spacing:.7px; }
.demo-pos-detail .demo-table td { padding:8px; }
.demo-pos-bottom { display:grid; grid-template-columns:.65fr 1.35fr; gap:12px; margin-top:12px; }
.demo-observation .demo-value { min-height:93px; }
.demo-payment { padding:12px; background:#fff; border:1px solid #d5d8df; border-radius:15px; }
.demo-payment-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.demo-payment-heading small { font-size:7px; letter-spacing:1px; color:#617087; }
.demo-payment-grid { display:grid; grid-template-columns:1fr 1.3fr .8fr; gap:7px; padding:8px; background:#f4f4f6; border:1px solid #d5d8df; border-radius:9px; }
.demo-payment-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:9px; }
.demo-payment-totals .demo-total { background:#f4f4f6; }
.demo-payment-totals .demo-total--emphasis { background:#062731; }
.demo-payment-totals .demo-total:nth-child(2) strong { color:#e90044; }
.demo-issue-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.demo-issue-actions .demo-button { border-radius:8px; }
.demo-stock-card { max-width:600px; margin:18px auto 0; border:1px solid #d5d8df; border-radius:16px; background:white; box-shadow:0 8px 25px #24334410; }
.demo-stock-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px; border-bottom:1px solid #d5d8df; }
.demo-stock-heading small { color:#62748a; font-size:8px; letter-spacing:1.2px; text-transform:uppercase; }
.demo-stock-heading h3 { font-size:17px; margin:5px 0; font-weight:750; }
.demo-stock-product { display:flex; align-items:center; gap:12px; }
.demo-stock-card .demo-table { font-size:11px; }
.demo-stock-card .demo-table td { padding:15px 10px; }
.demo-stock-card .demo-table tfoot { background:#f2f3f6; font-weight:700; }
.demo-stock-note { color:#607289; font-size:10px; margin-top:14px; }
.landing-demo-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 8px 0; }
.landing-demo-steps { display:flex; gap:6px; flex-wrap:wrap; }
.landing-demo-steps button { position:relative; overflow:hidden; padding:11px 15px; border:1px solid transparent; border-radius:10px; color:#617283; font-size:11px; font-weight:500; cursor:pointer; }
.landing-demo-steps button > span { font-size:9px; margin-right:5px; opacity:.6; }
.landing-demo-steps button[aria-pressed="true"] { border-color:#e7c89a; background:#fff5e4; color:#775023; font-weight:700; }
.landing-demo-steps button:hover { background:#fdf1de; }
.landing-demo-toggle { min-height:34px; padding:6px 10px; border-radius:8px; color:#6c6d72; font-size:10px; cursor:pointer; white-space:nowrap; }
.landing-demo-toggle::before { content:"Ⅱ"; margin-right:5px; }
.landing-demo-toggle[aria-pressed="true"]::before { content:"▷"; }
.landing-demo-toggle:disabled { cursor:default; }
.landing-demo-toggle:disabled::before { content:none; }
.landing-preview figcaption { text-align:center; font-size:10px; color:#7f807f; margin-top:12px; }
.landing-module-strip { margin-top:10px; padding:19px 30px; border-radius:16px; background:#121c30; color:white; }
.landing-module-strip p { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:9px; font-weight:700; letter-spacing:1.5px; }
.landing-module-strip i { color:#e9c18a; font-style:normal; font-size:14px; }
.landing-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:35px 0; border-bottom:1px solid #e2e0da; }
.landing-benefit { display:flex; align-items:flex-start; gap:14px; }
.landing-benefit-icon { display:grid; place-items:center; width:39px; height:39px; flex-shrink:0; border:1px solid #e9d6b7; border-radius:11px; background:#fff8ec; color:#9f7546; }
.landing-benefit:nth-child(2) .landing-benefit-icon { color:#168c99; background:#eaf9f8; border-color:#b8e3e1; }
.landing-benefit:nth-child(3) .landing-benefit-icon { color:#8d6ca4; background:#f5eff9; border-color:#decee9; }
.landing-benefit h2 { font-size:13px; font-weight:700; margin-bottom:7px; }
.landing-benefit p { color:#5f7184; font-size:12px; line-height:1.75; }
.landing-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:24px 0; color:#7b828a; font-size:10px; }
.landing-footer span { margin:0 6px; }
/* The same visual language continues into the existing sign-in flow. */
.landing-modal { position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 24px; background: #0d2235b8; }
.landing-dialog { display: grid; grid-template-columns: .85fr 1.15fr; width: min(850px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; background: #fff; border: 1px solid #dce7e9; border-radius: 20px; box-shadow: 0 24px 80px #07172150; }
.landing-dialog-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 34px; background: #eaf5f6; }
.landing-dialog-aside h2 { font-size: 30px; line-height: 1.2; letter-spacing: -1px; font-weight: 650; margin: 18px 0; color: var(--landing-ink); }
.landing-dialog-aside p { color: var(--landing-muted); font-size: 13px; line-height: 1.8; }
.landing-dialog-aside .landing-dialog-aside-footer { font-size: 10px; }
.landing-dialog-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #c7dfe3; border-radius: 13px; color: #087f96; }
.landing-dialog-mark .landing-icon { width: 25px; height: 25px; }
.landing-dialog-form { position: relative; padding: 54px 38px 38px; }
.landing-dialog-close { position: absolute; display: grid; place-items: center; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 8px; color: #526773; background: transparent; font-size: 26px; cursor: pointer; }
.landing-dialog-close:hover { background: #eef4f6; }
.landing-form-eyebrow { font-size: 9px; letter-spacing: 1.5px; color: #087f96; font-weight: 750; }
.landing-dialog-form h2 { font-size: 30px; font-weight: 700; letter-spacing: -.9px; margin-top: 10px; color: var(--landing-ink); }
.landing-form-description { font-size: 13px; color: var(--landing-muted); margin: 8px 0 26px; }
.landing-login-form { display: grid; gap: 20px; }
.landing-login-form label { display: block; margin-bottom: 8px; color: #344e5e; font-size: 12px; font-weight: 600; }
.landing .landing-login-form :is(input[type=email], input[type=password], input[type=text]) { width: 100%; min-height: 48px; padding: 12px 14px; background: #fbfdfd; color: #142333; border: 1px solid #ccdce2; border-radius: 9px; font-size: 16px; box-shadow: none; }
.landing-login-form input::placeholder { color: #7b8d98; }
.landing-password-field { position: relative; }
.landing .landing-password-field input { padding-right: 48px !important; }
.landing-password-field button { display: grid; place-items: center; position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border-radius: 7px; background: transparent; color: #607986; cursor: pointer; }
.landing-password-field button svg { width: 20px; height: 20px; }
.landing-login-form .landing-button { width: 100%; margin-top: 3px; }
.landing-login-recovery { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #e4ecef; margin-top: 26px; padding-top: 20px; color: #657984; font-size: 11px; }
.landing-login-recovery a { color: #087f96; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.landing-alert { margin-bottom: 20px; padding: 12px 14px; color: #a22942; background: #fff0f2; border: 1px solid #f3cdd5; border-radius: 8px; font-size: 13px; }
.landing-dialog-aside { background-color:#f8efdf; background-image:linear-gradient(#bda77f13 1px,transparent 1px),linear-gradient(90deg,#bda77f13 1px,transparent 1px); background-size:25px 25px; }
.landing-dialog-form { background:#fffdf8; }
.landing-dialog-summary { border:1px solid #e6dccd; padding:24px; border-radius:24px; background:#fffdf8; box-shadow:0 18px 30px -19px #59442b50; }
.landing-dialog-summary > p { color:#64748b; font-weight:750; font-size:9px; letter-spacing:1.5px; }
.landing-dialog-summary > div { display:flex; gap:10px; margin-top:18px; }
.landing-dialog-summary > div > span { display:flex; flex-direction:column; gap:8px; flex:1; border-radius:13px; padding:15px; background:#101b30; color:#fff; font-size:16px; font-weight:750; }
.landing-dialog-summary > div > span:nth-child(2) { background:#e7f9fc; color:#183447; border:1px solid #c9e8ec; }
.landing-dialog-summary .landing-dialog-summary-line { display:block; height:6px; border-radius:4px; background:linear-gradient(to right,#10b3c9 75%,#e3e7ec 75%); }
.landing-login-recovery { align-items:center; justify-content:space-between; }
.landing-login-recovery .landing-recovery { min-height:38px; padding:8px 12px; font-size:11px; }
/* Same CSS layer as the legacy !important dark rules: this public page keeps its own colors. */
@layer base {
 html.theme-dark .landing .landing-login-form :is(input[type=email],input[type=password],input[type=text]) { background-color:#fffdf9 !important; color:#142333 !important; border-color:#ccdce2 !important; }
 html.theme-dark .landing .landing-login-form input::placeholder { color:#7b8d98 !important; }
 html.theme-dark .landing input.landing-button-primary { background-color:#008ba8 !important; color:white !important; border-color:transparent !important; }
 html.theme-dark .landing input.landing-button-primary:hover { background-color:#006e87 !important; }
 html.theme-dark .landing table thead { background-color:#eeeef1 !important; }
 html.theme-dark .landing table tbody { background-color:#fff !important; }
}
@media (prefers-reduced-motion:no-preference) {
 .landing-intro { animation:landing-enter 500ms ease-out both; }
 .landing-orb { animation:landing-ambient 18s ease-in-out infinite alternate paused; }
 .landing-orb-two { animation-delay:-8s; }
 .landing h1 > span { animation:landing-color 8s ease-in-out infinite alternate paused; }
 .landing[data-demo-running="true"] :is(.landing-orb,h1 > span) { animation-play-state:running; }
 .demo-screen:not([hidden]) { animation:landing-screen-enter 400ms cubic-bezier(.2,.65,.3,1) both; }
 .landing-demo-steps button[aria-pressed="true"]::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:#cb9951; transform-origin:left; animation:landing-progress 5.5s linear both paused; animation-delay:var(--demo-progress-offset,0ms); }
 .landing[data-demo-running="true"] .landing-demo-steps button[aria-pressed="true"]::after { animation-play-state:running; }
 .landing .landing-button { transition:transform 180ms ease,box-shadow 180ms ease; }
 .landing .landing-button:hover { transform:translateY(-2px); box-shadow:0 12px 26px -10px #008fac70; }
 @keyframes landing-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
 @keyframes landing-screen-enter { from { opacity:.25; transform:translateY(7px); } to { opacity:1; transform:none; } }
 @keyframes landing-ambient { from { transform:translate3d(-15px,-15px,0) scale(.95); } to { transform:translate3d(55px,35px,0) scale(1.1); } }
 @keyframes landing-color { from { background-position:0% 50%; } to { background-position:100% 50%; } }
 @keyframes landing-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
@media (max-width:1000px) {
 .demo-app { grid-template-columns:100px minmax(0,1fr); }
 .demo-sidebar { padding:10px 6px; }
 .demo-sidebar-menu > span { font-size:9px; gap:5px; padding:8px 5px; }
 .demo-screen { padding:13px; }
 .demo-heading { align-items:flex-start; }
 .demo-toolbar { max-width:50%; }
 .demo-filters { grid-template-columns:1.5fr 1fr 1fr auto; }
 .demo-filters .demo-optional { display:none; }
 .demo-pos-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .demo-pos-heading h2 { max-width:200px; font-size:13px; }
 .demo-total { min-width:50px; padding:7px; }
 .demo-total strong { font-size:13px; }
 .demo-screen-stack { height:550px; }
 .demo-table .demo-optional { display:none; }
}
@media (max-width:700px) {
 .landing-header { min-height:80px; }
 .landing-brand img { width:40px; height:40px; }
 .landing-brand strong { font-size:22px; }
 .landing-brand span { font-size:8px; }
 .landing-hero { padding-top:35px; }
 .landing-intro { margin-bottom:35px; }
 .landing h1 { font-size:clamp(35px,6.7vw,48px); letter-spacing:-1.7px; }
 .landing-description { font-size:14px; max-width:430px; }
 .landing-platforms { font-size:10px; }
 .landing-demo-stage { padding:8px; border-radius:19px; }
 .landing-preview-surface { border-radius:11px; }
 .demo-app { grid-template-columns:1fr; }
 .demo-sidebar { display:none; }
 .demo-app-header { padding:10px 12px; min-height:65px; }
 .demo-app-header strong { font-size:10px; }
 .demo-company { min-width:125px; padding:6px 8px; }
 .demo-company strong { font-size:8px; }
 .demo-company small { font-size:6px; }
 .demo-screen-stack { height:550px; }
 .demo-heading h2 { font-size:16px; }
 .demo-heading p { font-size:8px; }
 .demo-table { font-size:8px; }
 .demo-table th,.demo-table td { padding:8px 6px; }
 .demo-table .demo-secondary { display:none; }
 .demo-pos-bottom { grid-template-columns:1fr; }
 .demo-observation { display:none; }
 .demo-total strong { font-size:12px; }
 .demo-stock-card .demo-table { font-size:9px; }
 .demo-stock-heading { padding:14px; }
 .demo-stock-product { gap:9px; }
 .landing-demo-controls { flex-direction:column; gap:5px; padding:12px 0 0; }
 .landing-demo-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:3px; }
 .landing-demo-steps button { padding:9px 5px; font-size:10px; }
 .landing-demo-steps button > span { display:block; margin:0 0 2px; font-size:8px; }
 .landing-demo-toggle { font-size:9px; }
 .landing-preview figcaption { font-size:9px; margin-top:7px; }
 .landing-module-strip { padding:18px; }
 .landing-module-strip p { font-size:8px; letter-spacing:.6px; gap:10px; flex-wrap:wrap; justify-content:center; }
 .landing-module-strip i { display:none; }
 .landing-benefits { grid-template-columns:1fr; gap:23px; padding:28px 0; }
 .landing-footer { flex-direction:column; font-size:9px; }
 .landing-dialog { grid-template-columns:1fr; max-width:450px; }
 .landing-dialog-aside { display:none; }
}
@media (max-width:480px) {
 .landing-page { padding:0 16px; }
 .landing .landing-button-dark { font-size:12px; gap:12px; padding:10px 16px; }
 .landing-access { gap:12px; }
 .landing .landing-button-primary { font-size:12px; padding:13px 16px; gap:12px; }
 .landing .landing-recovery { font-size:11px; padding:13px; }
 .landing-recovery-unavailable small { font-size:9px; }
 .landing h1 { font-size:clamp(31px,8.4vw,39px); letter-spacing:-1.4px; }
 .landing-description { font-size:13px; }
 .landing-preview-bar { padding:8px 10px; font-size:8px; }
 .demo-app-header strong { max-width:130px; font-size:8px; }
 .demo-app-header p { font-size:7px; }
 .demo-company { min-width:105px; max-width:115px; padding:6px; }
 .demo-company strong { font-size:7px; }
 .demo-warehouse { font-size:6px; letter-spacing:.5px; }
 .demo-screen { padding:10px; }
 .demo-heading { gap:7px; }
 .demo-heading p { max-width:170px; }
 .demo-toolbar { gap:4px; }
 .demo-toolbar .demo-optional { display:none; }
 .demo-button { font-size:8px; padding:6px 7px; }
 .demo-filters { grid-template-columns:1.5fr 1fr auto; gap:6px; padding:9px; }
 .demo-filters .demo-secondary { display:none; }
 .demo-field > span:first-child { font-size:8px; }
 .demo-value { font-size:8px; padding:6px; }
 .demo-table .demo-client-detail { display:none; }
 .demo-pos-heading { flex-wrap:wrap; padding:10px; }
 .demo-pos-heading h2 { max-width:none; font-size:13px; }
 .demo-totals { width:100%; }
 .demo-totals .demo-total { flex:1; }
 .demo-pos-fields { gap:6px; padding:9px; }
 .demo-pos-fields .demo-field .demo-value { font-size:7px; }
 .demo-pos-detail { padding:9px; }
 .demo-pos-detail .demo-toolbar { display:none; }
 .demo-payment { padding:9px; }
 .demo-payment-grid { gap:5px; padding:6px; }
 .demo-screen-stack { height:600px; }
 .demo-stock-heading h3 { font-size:14px; }
 .demo-stock-heading > .landing-icon { display:none; }
 .demo-stock-card .demo-table td { padding:12px 7px; }
 .demo-stock-note { font-size:9px; }
 .landing-modal { padding:12px; }
 .landing-dialog { max-height:calc(100dvh - 24px); border-radius:14px; }
 .landing-dialog-form { padding:50px 23px 26px; }
 .landing-login-recovery { gap:12px; }
}
.demo-icon { width:14px; height:14px; flex-shrink:0; }
.demo-eyebrow { display:block; font-size:8px; color:#61738c; }
.demo-company strong { text-transform:uppercase; }
.demo-company i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#10b981; margin-right:3px; }
.demo-sidebar-menu > .demo-nav-child { margin-left:18px; padding:6px 7px; font-size:9px; }
.demo-chevron { margin-left:auto; }
.demo-sidebar-footer { margin-top:auto; padding:12px 5px 0; font-size:7px; color:#8ba8b5; }
.landing[data-demo-phase="0"] .demo-nav-sales-list,.landing[data-demo-phase="1"] .demo-nav-sales-list,.landing[data-demo-phase="2"] .demo-nav-special { background:#ffffff0a; color:#e6f5fa; }
.demo-sales-filters { grid-template-columns:1.6fr repeat(6,minmax(0,1fr)) auto; }
.demo-special-filters { grid-template-columns:1.8fr repeat(4,minmax(0,1fr)) auto; }
.demo-filter-actions { display:flex; gap:5px; }
.demo-value { display:flex; justify-content:space-between; gap:5px; align-items:center; }
.demo-value--readonly { background:#f4f4f6; }
.demo-value--placeholder { color:#7a8191; }
.demo-button--dark { background:#07839d; color:white; border-color:#07839d; }
.demo-table-wrap { overflow-x:auto; position:relative; }
.demo-nowrap { white-space:nowrap; }
.demo-status-stack { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.demo-cell-detail > span + span { margin-left:4px; }
.demo-action-icon { display:inline-flex; justify-content:center; align-items:center; border:1px solid #ffc0cb; background:#fff5f7; color:#e92446; width:25px; height:25px; border-radius:50%; }
.demo-action-icon:nth-child(2) { background:#fffaf0; border-color:#efd7a2; color:#b98638; }
.demo-action-icon .demo-icon { width:11px; height:11px; }
.demo-action-label { display:inline-flex; padding:4px 8px; border:1px solid #d4d7df; border-radius:15px; background:white; }
.demo-pagination { display:flex; justify-content:space-between; gap:10px; }
.demo-pill--guide { color:#9a40a6; background:#fae8ff; }
.demo-pos-fields .demo-field--wide { grid-column:span 3; }
.demo-pos-fields .demo-field--wide:nth-child(3) { grid-column:span 2; }
.demo-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.demo-detail-heading .demo-button { color:#0788a2; border-color:#78bfce; background:#edfcff; }
.demo-line-value { display:block; padding:6px; border:1px solid #d3d7df; border-radius:7px; background:white; }
.demo-stock-link { color:#b28223; border:1px solid #e9c76e; background:#fff9dc; border-radius:6px; padding:5px; font-size:8px; cursor:pointer; white-space:nowrap; }
.demo-payment { margin:12px 0 0 auto; max-width:590px; }
.demo-payment-paid { display:flex; flex-direction:column; gap:3px; padding:6px 10px; background:#f5f5f7; border:1px solid #d5d8df; border-radius:9px; text-align:right; }
.demo-payment-paid span { font-size:7px; color:#65718b; text-transform:uppercase; letter-spacing:1px; }
.demo-payment-paid strong { font-size:12px; }
.demo-payment-totals > span { display:block; padding:8px 10px; font-size:8px; color:#64728a; background:#f5f5f7; border:1px solid #d5d8df; border-radius:9px; }
.demo-payment-totals > span strong { display:block; color:#152c3d; margin-top:4px; font-size:15px; }
.demo-payment-totals > span:nth-child(2) strong { color:#ef0046; }
.demo-payment-totals > span:nth-child(3) { background:#062731; color:#23d5e9; }
.demo-payment-totals > span:nth-child(3) strong { color:white; }
.demo-stock-product p { color:#708094; font-size:9px; }
.demo-product-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#e9f9fb; color:#168ca3; }
.demo-product-icon .demo-icon { width:22px; height:22px; }
.demo-stock-quantity { font-size:19px; }
.demo-stock-table td:first-child > .demo-pill { margin-left:7px; }
@media (max-width:1000px) {
 .demo-sales-filters { grid-template-columns:1.5fr 1fr 1fr auto; }
 .demo-special-filters { grid-template-columns:1.5fr 1fr 1fr; }
 .demo-sales-filters .demo-field:nth-child(n+4):nth-child(-n+7),.demo-special-filters .demo-field:nth-child(4),.demo-special-filters .demo-field:nth-child(5) { display:none; }
 .demo-special-filters .demo-filter-actions { grid-column:3; justify-content:flex-end; }
 .demo-pos-fields { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .demo-pos-fields .demo-field--wide,.demo-pos-fields .demo-field--wide:nth-child(3) { grid-column:auto; }
 .demo-pos-fields .demo-field--wide:first-child { grid-column:span 2; }
 .demo-sales .demo-table tr > :nth-child(3),.demo-special-sales .demo-table tr > :nth-child(3) { display:none; }
}
@media (max-width:700px) {
 .demo-sidebar-menu { display:none; }
 .demo-sales-filters { grid-template-columns:1.5fr 1fr auto; }
 .demo-sales-filters .demo-field:nth-child(3) { display:none; }
 .demo-table .demo-cell-detail { font-size:7px; }
 .demo-sales .demo-table tr > :nth-child(2),.demo-sales .demo-table tr > :nth-child(4),.demo-special-sales .demo-table tr > :nth-child(2) { display:none; }
 .demo-actions .demo-action-icon { display:none; }
 .demo-pos-fields { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .demo-payment { max-width:none; }
}
@media (max-width:480px) {
 .demo-toolbar > span { display:none; }
 .demo-special-sales .demo-toolbar > span { display:inline-flex; }
 .demo-filters .demo-filter-actions > span:nth-child(2) { display:none; }
 .demo-sales-filters { grid-template-columns:1.5fr 1fr auto; }
 .demo-special-filters { grid-template-columns:1.4fr 1fr auto; }
 .demo-special-filters .demo-field:nth-child(3) { display:none; }
 .demo-special-filters .demo-filter-actions { grid-column:auto; }
 .demo-pos-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .demo-pos-fields .demo-field--wide:first-child { grid-column:auto; }
 .demo-pos-fields .demo-field:nth-child(3),.demo-pos-fields .demo-field:nth-child(7),.demo-pos-fields .demo-field:nth-child(9),.demo-pos-fields .demo-field:nth-child(10) { display:none; }
 .demo-line-table tr > :nth-child(1),.demo-line-table tr > :nth-child(6) { display:none; }
 .demo-detail-heading .demo-button { display:none; }
 .demo-payment-totals > span { font-size:7px; padding:6px; }
 .demo-payment-totals > span strong { font-size:13px; }
 .demo-product-icon { display:none; }
 .demo-stock-card { margin-top:12px; }
 .demo-stock-card .demo-table { font-size:8px; }
 .demo-stock-table td:first-child > .demo-pill { display:block; width:max-content; margin:4px 0 0; }
 .demo-stock-quantity { font-size:16px; }
 .demo-stock-table .demo-pill { font-size:6px; }
 .demo-stock-heading > .demo-pill { font-size:6px; }
}

/* Fit the complete sale and payment inside the demo viewport. */
.demo-pos-heading { padding:8px 12px; }
.demo-pos-fields { padding:8px 12px; gap:5px; }
.demo-pos-fields .demo-field > span:first-child { margin-bottom:3px; }
.demo-pos-fields .demo-value { min-height:25px; padding:5px 7px; }
.demo-pos-detail { padding:8px 12px; }
.demo-detail-heading { margin-bottom:6px; }
.demo-pos-detail .demo-table th { padding:6px; }
.demo-pos-detail .demo-table td { padding:6px; }
.demo-payment { padding:8px; margin-top:9px; }
.demo-payment-paid { padding:4px 8px; }
.demo-payment-grid { padding:6px; }
.demo-payment-grid .demo-value { min-height:25px; padding:5px 7px; }
.demo-payment-grid .demo-field > span:first-child { margin-bottom:3px; }
.demo-payment-totals { margin-top:7px; }
.demo-payment-totals > span { padding:6px 8px; }
.demo-payment-totals > span strong { margin-top:2px; font-size:13px; }
.demo-issue-actions { margin-top:7px; }
@media (max-width:480px) {
 .demo-pos-fields .demo-field:nth-child(2) { display:none; }
 .demo-pos-fields .demo-value { padding:5px; }
 .demo-pos-detail { padding:8px; }
 .demo-payment-grid { grid-template-columns:1fr 1fr; }
 .demo-payment-grid .demo-field:nth-child(2) { display:none; }
 .demo-payment-paid strong { font-size:11px; }
 .demo-special-sales .demo-table tr > :nth-child(7) { display:none; }
}
@media (min-width:481px) and (max-width:1000px) {
 .demo-screen-stack { height:590px; }
}
@media (max-width:360px) {
 .demo-screen-stack { height:630px; }
 .demo-sales .demo-table tr > :nth-child(7),.demo-special-sales .demo-table tr > :nth-child(4) { display:none; }
}