Accessibility issues detected on hisab360.net
Evolize inspected 5 publicly accessible pages on hisab360.net and detected 57 automatically identifiable accessibility findings. 7 findings were classified as critical or high priority. The findings map to 10 WCAG success criterions. The sections below show affected pages, technical evidence and recommended remediation. The most frequent issues involve hidden elements can still receive keyboard focus, form fields use placeholder text as the only label, elements must only use permitted aria attributes.
57findings detected
7critical + high
5pages inspected
12 Aug 2026assessed
Independent public assessment. hisab360.net is not necessarily affiliated with or a customer of Evolize.
01 · Accessibility summary
Evolize inspected 5 publicly accessible pages on hisab360.net and detected 57 automatically identifiable accessibility findings. 7 findings were classified as critical or high priority. The findings map to 10 WCAG success criterions. The sections below show affected pages, technical evidence and recommended remediation. The most frequent issues involve hidden elements can still receive keyboard focus, form fields use placeholder text as the only label, elements must only use permitted aria attributes.
02 · Priority findings
03 · WCAG criteria affected
| Criterion | Name | Level | Findings | Pages |
|---|---|---|---|---|
| 1.4.3 | Contrast (Minimum) | AA | 36 | 5 |
| 2.5.8 | Target Size (Minimum) | AA | 8 | 5 |
| 2.4.3 | Focus Order | A | 5 | 5 |
| 1.2.2 | Captions (Prerecorded) | A | 2 | 1 |
| 4.1.2 | Name, Role, Value | A | 2 | 5 |
| 1.3.1 | Info and Relationships | A | 1 | 5 |
| 1.4.1 | Use of Color | A | 1 | 1 |
| 1.4.10 | Reflow | AA | 1 | 1 |
| 2.4.1 | Bypass Blocks | A | 1 | 5 |
| 3.3.2 | Labels or Instructions | A | 1 | 5 |
Absence of a criterion here does not indicate conformance with it — only that no automatically detectable issue was found for it.
Continuous monitoring
A scan shows today's exposure. Monitoring shows what changes next.
Evolize continuously rescans public websites, detects newly introduced or recurring accessibility issues, tracks remediation and verifies fixes.
04 · All detected findings
High
Hidden elements can still receive keyboard focus
ComponentRef MQFUU7
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Affected page
https://hisab360.net/Element
html > body > div:nth-of-type(3) > div > form:nth-of-type(1) > input:nth-of-type(1)Markup
<input class="hc-g-name" type="text" placeholder="Your name" autocomplete="name" maxlength="80" required="">
How to fixEnsure that all focusable elements are visible or remove them from the tab order by setting the 'tabindex' attribute to '-1' or using 'display: none;' or 'visibility: hidden;' CSS properties.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlComponentRef LS6MTW
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Affected page
https://hisab360.net/Element
div#demoModal > div > buttonAccessible nameGot it
Markup
<button class="btn btn-primary modal-close" type="button">Got it</button>
How to fixEnsure that hidden elements are removed from the tab order by setting the 'tabindex' attribute to '-1' or by using 'display: none' or 'visibility: hidden' CSS properties to completely hide the element from both screen readers and sighted users.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlComponentRef 69YOPN
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Affected page
https://hisab360.net/Element
html > body > div:nth-of-type(3) > div > div:nth-of-type(1) > buttonAccessible nameClose chat
Markup
<button class="hc-x" type="button" aria-label="Close chat">×</button>
How to fixEnsure that all interactive elements are visible when they receive keyboard focus, or remove them from the tab order if they are not meant to be interacted with. Consider using the 'display: none' or 'visibility: hidden' CSS properties to remove the element from the tab order when it is not visible.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlComponentRef 0V2RIP
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Affected page
https://hisab360.net/Element
nav#site-navigation > a:nth-of-type(1)Accessible nameFeatures
Markup
<a href="features.html">Features</a>
How to fixRemove the link from the tab order by setting the 'tabindex' attribute to '-1' or by making the link visible when it receives focus. Alternatively, consider removing the link altogether if it is not intended to be used.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlComponentRef 2Q43E1
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Affected page
https://hisab360.net/Element
div > div > div:nth-of-type(1) > div:nth-of-type(1) > video > aAccessible nameDownload the demo (MP4)
Markup
<a href="https://dl.hisab360.net/media/hisab-360-demo.mp4">Download the demo (MP4)</a>
How to fixEnsure that all interactive elements, such as links, are visible when they receive keyboard focus. Consider removing the link from the tab order or making it visible when focused.
High
Form fields use placeholder text as the only label
ComponentRef GGZN2E
Fields rely on placeholder text instead of a real label. The placeholder disappears once the user types, and it is not exposed as a programmatic label.
Affected page
https://hisab360.net/Element
html > body > div:nth-of-type(3) > div > form:nth-of-type(1) > input:nth-of-type(1)Markup
<input class="hc-g-name" type="text" placeholder="Your name" autocomplete="name" maxlength="80" required="">
How to fixAdd a visible label to each form field that remains present even when the user starts typing. This can be achieved by adding a `<label>` element associated with each input field, ensuring that the `for` attribute of the label matches the `id` attribute of the input.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlHigh
Elements must only use permitted ARIA attributes
ComponentRef J5VEC2
Elements must only use permitted ARIA attributes
Affected page
https://hisab360.net/login.htmlElement
.contact-dock-panelAccessible nameContact HISAB 360
Markup
<div class="contact-dock-panel" aria-label="Contact HISAB 360">
How to fixCheck the WAI-ARIA specification to see which attributes are allowed on 'div' elements and remove or replace any non-permitted attributes.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlComponentRef ILZLUE
Elements must only use permitted ARIA attributes
Affected page
https://hisab360.net/Element
.command-consoleAccessible nameHISAB command center preview
Markup
<div class="command-console reveal" aria-label="HISAB command center preview" style="transition-delay: 220ms;">
How to fixReview the use of ARIA attributes on this element and ensure that only permitted attributes are used. Check the WAI-ARIA specification to determine which attributes are allowed for this element.
High
Links must be distinguishable without relying on color
ComponentRef VQQ6HH
Links must be distinguishable without relying on color
Affected page
https://hisab360.net/signup.htmlElement
a[href$="terms.html"]Accessible nameTerms of Service
Markup
<a href="terms.html">Terms of Service</a>
How to fixTo fix this issue, add an underline or other visual indicator to the link, or ensure that the link text has sufficient contrast with the surrounding text. Alternatively, consider using a more prominent styling for links, such as a different font or background color, to make them stand out.
Medium
No skip link to main content
ComponentRef I8YJ1T
The page offers no bypass mechanism, so keyboard users must tab through the full navigation before reaching the main content on every page.
Affected page
https://hisab360.net/Element
html > bodyAccessible nameHHISAB 360
Features
How it works
Use cases
Pricing
TutorialsDocs
Download
Sign in
Get HISAB
AI · Python · ERP · for Excel
Excel,fully evolved.
Chat with your spreadsheet. HISAB 360 reads sheets, writes formulas, runs
Python, reconciles with your ERP, and drafts reports — all by conversation,
all inside Excel.
Start free
Watch the demo
Windows · Excel 2016+ · Free 15-day trial with 50 AI credits
Local-first workbook context
Approval-gated writes
Audit trail by default
Macro and ribbon builder
14xfaster close checks
0unreviewed ERP posts
100%write traceability
Month-end close workspace
HISAB Copilot
Reconcile bank statement with GL and draft adjustments.
Read workbook context
Run Python matching
Prepare review queue
Bank_Recon.xlsx
Variance review
AccountBankGLStatus
1010 Cash$284,920$284,920Matched
1040 Clearing$18,440$17,920Review
2200 Accruals$9,650$9,650Matched
4310 Revenue$76,300$75,880Draft JE
97.8%auto-matched
12items for approval
0ERP posts without review
AI plan ready
DPAPI vault
The HISAB command layer
Not a chatbot. A controlled finance operating system inside Excel.
HISAB turns a plain-English request into a governed workflow: gather only the needed workbook context, run the right skill, reconcile with Python, route risky writes for approval, then leave an audit trail a controller can defend.
0% less manual matching
0control gates before ERP posting
0second audit-log export
Live close command
Ask HISAB
Pull Zoho trial balan
01
Scope workbookHeaders, selected ranges, sample rows. No full workbook upload.
02
Run local Python pipelineOffline scripts process exports, folders, checks, report packs, and repeatable close routines.
03
Generate reproducible reportsException table, refreshed workpapers, draft journals, narrative commentary, evidence links.
04
Approval gateController approves workbook writes and any ERP push before execution.
Matched1,248 rows
Exceptions17 items
Draft JEs6 entries
Built for finance teams using
Odoo
Xero
QuickBooks Online
Zoho Books
FreshBooks
Governance by design
Choose how brave the automation is allowed to be.
Every team has a different risk appetite. HISAB lets finance leaders define the operating mode before a single cell changes.
Ask-only
Plan
Action
Automate
Ask-only mode
Read-only intelligence for regulated close work.
HISAB can analyze, explain, and prepare outputs, but cannot write to cells or post back to ERP. Ideal for audit prep, board packs, and first-time reviews.
Workbook context minimized
No write operations
Exportable evidence pack
See it in action
Watch HISAB 360 do the work.
Real demos — plain-English prompts in, finished work in your sheet. More on the way.
Your browser can't play this video.
Download the demo (MP4).
Build a VBA toolkit & custom ribbon
HISAB writes the VBA macros and wires up a matching Excel ribbon from plain-English prompts — no VBA editor required.
Your browser can't play this video.
Download the demo (MP4).
Offline Python bank reconciliation
Match a bank statement to the GL with sandboxed Python, flag the exceptions, then save it as a repeatable script that re-runs every period — fully offline.
Your browser can't play this video.
Download the demo (MP4).
Read & write your ERP from Excel
Pull live data from Odoo, then post changes back — staged for your approval, with every write logged. The same flow works for Xero, QuickBooks and Zoho.
Your browser can't play this video.
Download the demo (MP4).
Connect Zoho Books to Excel
Pull live Zoho Books data into Excel and post changes back — invoices, bills, contacts — staged for your approval, with every write logged.
Your browser can't play this video.
Download the demo (MP4).
Build a 3-statement financial model
Watch HISAB 360 build a startup projection — income statement, balance sheet and cash flow — from a prompt. ⬇ Download the free model (Excel)
Your browser can't play this video.
Download the demo (MP4).
Post invoices to QuickBooks Online
Point HISAB at a folder of vendor invoice PDFs — it matches each to the right vendor and line item in QuickBooks Online, stages them as Bills for your review, then posts them on your approval. The same flow works for Xero, Zoho and Odoo.
Four pillars
Everything finance teams want, inside Excel.
AI
AI-driven
Chat in plain English. Claude reads your sheets, understands your intent, and writes the formulas. No syntax to memorise.
Py
Python-powered
Heavy analyses run in a sandboxed Python — pandas, numpy, openpyxl, plotly — results written straight back to your sheet.
Run
Offline automation
Run repeatable Python scripts offline to process files, rebuild reports, refresh workpapers, and reproduce the same outputs every period.
ERP
ERP-native
Pull data from Odoo, Xero, QuickBooks Online, Zoho Books, and FreshBooks. OAuth, REST, and OData connectors — all wired in.
✓
Audit-grade
Every write journaled. Destructive ops need approval. DPAPI-encrypted credentials. Built for finance, not for demos.
Rbn
Macros + ribbons
Generate VBA macros, custom Excel ribbon buttons, and repeatable workflow commands from plain-English instructions.
PQ
Power Query, by AI
Combine a folder of Excel or CSV files into one refreshable table — the AI writes the Power Query for you, then refreshes it every month.
Drl
Drill-down totals
Double-click any total to expand the transactions behind it, inline — then collapse them again. No pivot table required.
Say
Voice advisor — meet Sahib & Sahiba
Prefer to talk? Dictate into the chat and a spoken advisor answers back — Sahib (male) or Sahiba (female) — with natural neural voices via your own OpenAI or Google key, or the built-in Windows voice for free (details: voice-controlled Excel). See how →
See all features →
How it works
From spreadsheet to insight in one conversation.
1
You ask in plain English.
"Reconcile bank statement with the bank book, flag mismatches over ₹500."
2
HISAB sends sheet context to the AI.
Sheet names, ranges, headers, sample rows — only what's needed, never the full workbook. Your data stays on your machine.
3
The AI generates Python or formulas.
Complex analyses run in sandboxed Python; simple changes write straight to cells. You see every step in the chat.
4
Results land in your sheet.
Reports, pivots, flagged rows, summary tables — exactly where you asked. Every write is in the audit log.
Use cases
Built for the people who close the books.
Month-end close
Accruals, reconciliations, variance analysis — drafted by AI, reviewed by you, posted in minutes instead of hours.
Bank reconciliation
Drop a bank statement next to your bank book. HISAB matches transactions, flags mismatches, drafts journal entries.
ERP exports
Pull GL trial balances, AR/AP ageing, inventory snapshots. Clean, pivot, summarise — without ever leaving Excel.
Audit prep
Sample selection, control testing workpapers, deficiency classification — generated, never invented. Every step traceable.
Management reporting
Period-over-period P&L, waterfall variance, narrative explanations — drafted in your existing template.
Ad-hoc analysis
"Show me which customers paid late this quarter." Sixty seconds later: the answer, in your sheet.
More use cases →
Why teams choose HISAB
"What took our team a full Friday afternoon — reconciling 14 bank accounts against the GL — now finishes by lunchtime on Monday. We didn't replace anyone; we just stopped wasting their time on the mechanical part."
Faisal Ahmed · Controller, Mid-cap manufacturing · Karachi
Try HISAB 360
Free 15-day trial — every feature plus 50 HISAB AI credits. Windows, Excel 2016 or later. Five-minute install.
Start free trial
No credit card required. See pricing →
HHISAB 360
AI-driven Excel, Python and ERP automation. Built for finance teams.
Product
Features
Pricing
Use cases
Changelog
Resources
Documentation
Blog
Free formula generator
Getting started
Authoring skills
FAQ
Company
About
Contact
Security
Privacy
Account
Sign in
Create account
License keys
Billing
© 2026 HISAB 360 · Excel, fully evolved.
Terms · Privacy · DPA
Featured on
SubmitAITools
Dofollow.Tools
Thank John
Preview only
This is a preview of the experience.
Got it
Contact
Talk to HISAB
Sales, support, demo, or launch questions.
Live chat Ask AI
Contact page Open
Email [email removed] Send
Support desk Help
HISAB 360Ask us anything×Before we start — how can we reach you?So a real person can follow up. Takes 10 seconds.Start chat
Markup
<body>
<!-- ============================== NAV ============================== -->
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html"><span class="brand-mark">H</span><span class="brand-name">HISAB 360</span></a>
<button type="button" class="nav-menu-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="site-navigation"><span></span></button><nav class="nav-links" id="site-navigation">
<a href="features.html">Features</a>
<a href="#how" class="active">How it works</a>
<a href="use-cases.html">Use cas…How to fixAdd a skip link to the main content at the top of the page, allowing keyboard users to bypass the navigation. This link should be visible when focused and should skip to the main content when activated.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlMedium
Touch targets are too small on mobile
ComponentRef CAG21K
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/login.htmlElement
html > body > main > div > p:nth-of-type(2) > aAccessible nameCreate an account
Markup
<a href="signup.html">Create an account</a>
How to fixIncrease the size of the touch target for the 'Create an account' link to at least 24x24px to make it easier to activate on mobile devices.
Affected pages
/login.html /account/license.html /account/billing.html /signup.htmlComponentRef 16FD5U
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/login.htmlElement
main > div > form > div:nth-of-type(2) > label > aAccessible nameForgot?
Markup
<a class="auth-link" href="forgot.html">Forgot?</a>
How to fixIncrease the size of the 'Forgot?' link to at least 24x24px to make it easier to tap on mobile devices. Consider adding padding or increasing the font size to achieve this.
Affected pages
/login.html /account/license.html /account/billing.htmlComponentRef DKEFHE
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/Element
div > div:nth-of-type(1) > div:nth-of-type(2) > ul > li:nth-of-type(1) > aAccessible nameFeatures
Markup
<a href="features.html">Features</a>
How to fixIncrease the size of the touch target for the 'Features' link to at least 24x24px to make it easier to activate on mobile devices.
ComponentRef MBPLE1
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/Element
div > div > div:nth-of-type(1) > div:nth-of-type(2) > h3 > aAccessible nameBuild a VBA toolkit & custom ribbon
Markup
<a href="/tutorials/build-vba-macros-and-ribbon-in-excel.html" style="color:inherit;text-decoration:none">Build a VBA toolkit & custom ribbon</a>
How to fixIncrease the size of the touch target to at least 24×24px to make it easier to activate on mobile devices. Consider adding padding or increasing the font size of the link text.
ComponentRef 4S2DHE
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/Element
html > body > header > div > a:nth-of-type(2)Accessible nameSign in
Markup
<a class="nav-sign-in" href="login.html">Sign in</a>
How to fixIncrease the size of the 'Sign in' link's touch target to at least 24x24px to make it easier to activate by touch.
ComponentRef 7WMYN3
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/Element
body > main > section:nth-of-type(10) > div > p:nth-of-type(2) > aAccessible nameSee pricing →
Markup
<a href="pricing.html">See pricing →</a>
How to fixIncrease the size of the touch target for the 'See pricing →' link to at least 24x24px to make it easier to activate on mobile devices.
ComponentRef 839ZYI
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/Element
div > div:nth-of-type(1) > article:nth-of-type(9) > div:nth-of-type(2) > p > a:nth-of-type(1)Accessible namevoice-controlled Excel
Markup
<a href="/voice-controlled-excel.html">voice-controlled Excel</a>
How to fixIncrease the size of the touch target for the 'voice-controlled Excel' link to at least 24×24px to make it easier for users to activate.
ComponentRef TOPVAE
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://hisab360.net/Element
div > div > div:nth-of-type(5) > div:nth-of-type(2) > p > aAccessible name⬇ Download the free model (Excel)
Markup
<a href="https://dl.hisab360.net/media/hisab-360-startup-financial-model.xlsx" download=""><strong>⬇ Download the free model (Excel)</strong></a>
How to fixIncrease the size of the touch target to at least 24×24px to make it easier for users to tap on mobile devices. Consider adding padding or increasing the font size of the link text to achieve this.
Medium
Text has insufficient colour contrast
ComponentRef JN3KGV
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
.contact-dock-toggle > spanAccessible nameContact
Markup
<span>Contact</span>
How to fixIncrease the contrast between the text color and background color of the 'Contact' button to meet the minimum contrast ratio thresholds as defined by WCAG 2.1 SC 1.4.3.
Affected pages
/ /login.html /account/license.html /account/billing.html /signup.htmlComponentRef EM1BWG
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
.brand-markAccessible nameH
Markup
<span class="brand-mark">H</span>
How to fixIncrease the contrast between the text and background colors by using a color with sufficient lightness difference, or add a background image or overlay to enhance the contrast.
Affected pages
/login.html /account/license.html /account/billing.html /signup.htmlComponentRef 6YHXHL
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
.btn-blockAccessible nameSign in
Markup
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
How to fixIncrease the contrast between the text color and background color of the button to meet the minimum contrast ratio thresholds, such as using a darker or lighter background color, or a more vibrant text color.
Affected pages
/login.html /account/license.html /account/billing.html /signup.htmlComponentRef CWJJ0A
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
.auth-dividerAccessible nameor with email
Markup
<div class="auth-divider">or with email</div>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter background color, or by changing the text color to a color with sufficient contrast.
Affected pages
/login.html /account/license.html /account/billing.html /signup.htmlComponentRef 4XMDTT
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
label[for="email"]Accessible nameWork email
Markup
<label for="email">Work email</label>
How to fixIncrease the contrast between the text color and background color of the 'Work email' label to meet the minimum contrast ratio thresholds as defined by WCAG 2.1 SC 1.4.3.
Affected pages
/login.html /account/license.html /account/billing.html /signup.htmlComponentRef UGE3YA
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
.auth-footer > a[href$="signup.html"]Accessible nameCreate an account
Markup
<a href="signup.html">Create an account</a>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio requirements.
Affected pages
/login.html /account/license.html /account/billing.html /signup.htmlComponentRef T0UX2V
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.footer-featured > spanAccessible nameFeatured on
Markup
<span>Featured on</span>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter background, or by changing the text color to a color that has sufficient contrast with the background.
ComponentRef J8OSO9
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
.auth-linkAccessible nameForgot?
Markup
<a class="auth-link" href="forgot.html">Forgot?</a>
How to fixIncrease the contrast between the text color and the background color of the 'Forgot?' link to meet the minimum contrast ratio as defined by WCAG 2.1 SC 1.4.3.
Affected pages
/login.html /account/license.html /account/billing.htmlComponentRef PX888G
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/login.htmlElement
label[for="password"] > spanAccessible namePassword
Markup
<span>Password</span>
How to fixIncrease the contrast between the text color and background color of the 'Password' label by using a darker or lighter shade, or by adding a background image or texture that provides sufficient contrast.
Affected pages
/login.html /account/license.html /account/billing.htmlComponentRef V5T0JM
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
h1Accessible nameExcel,fully evolved.
Markup
<h1 class="hero-title">Excel,<br><em>fully evolved.</em></h1>
How to fixIncrease the contrast between the text color and background color by using a color with a higher contrast ratio, such as a darker or lighter shade, to meet the minimum contrast ratio thresholds.
ComponentRef JETM0M
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.hero-eyebrowAccessible nameAI · Python · ERP · for Excel
Markup
<p class="hero-eyebrow">AI · Python · ERP · for Excel</p>
How to fixIncrease the contrast between the text color and background color by using a color with a higher contrast ratio, or add a background image or texture to improve readability.
ComponentRef RJPY22
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.sheet-toolbar > spanAccessible nameBank_Recon.xlsx
Markup
<span>Bank_Recon.xlsx</span>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade for either the text or the background, ensuring a minimum contrast ratio of 4.5:1 for normal text.
ComponentRef 311FHM
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.sheet-toolbar > strongAccessible nameVariance review
Markup
<strong>Variance review</strong>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade for either the text or the background to meet the minimum contrast ratio of 4.5:1 for normal text.
ComponentRef KUS81I
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.hero-metaAccessible nameWindows · Excel 2016+ · Free 15-day trial with 50 AI credits
Markup
<p class="hero-meta">Windows · Excel 2016+ · Free 15-day trial with 50 AI credits</p>
How to fixIncrease the contrast between the text color and background color by using a color combination that meets the WCAG 2.1 guidelines for minimum contrast ratio.
ComponentRef 9BD3RI
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.done.chat-step:nth-child(3)Accessible nameRead workbook context
Markup
<div class="chat-step done">Read workbook context</div>
How to fixAdjust the CSS to ensure the text and background colors have a contrast ratio of at least 4.5:1 for normal text. Consider using a color contrast analyzer tool to find a suitable color combination.
ComponentRef 501SB1
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.hero-proof-grid > div:nth-child(1) > spanAccessible namefaster close checks
Markup
<span>faster close checks</span>
How to fixAdjust the color of the text or its background to meet the minimum contrast ratio of 4.5:1 for normal text, as recommended by the Web Content Accessibility Guidelines (WCAG 2.1).
ComponentRef SGHTN3
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.product-footer > div:nth-child(1) > strongAccessible name97.8%
Markup
<strong>97.8%</strong>
How to fixIncrease the contrast between the text color and the background color by using a color with a higher contrast ratio, such as a darker or lighter shade.
ComponentRef 07SDCQ
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.nav-ctaAccessible nameGet HISAB
Markup
<a class="btn btn-primary nav-cta" href="signup.html">Get HISAB</a>
How to fixIncrease the contrast between the text color and background color of the button to meet the minimum contrast ratio thresholds, such as using a darker or lighter background color, or a more vibrant text color.
ComponentRef KHH6YK
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.footer-brand-col > .brand[href="index.html"] > .brand-markAccessible nameH
Markup
<span class="brand-mark">H</span>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade, or add an outline to the text to make it more readable.
ComponentRef D60KX
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.head:nth-child(1)Accessible nameAccount
Markup
<span class="head">Account</span>
How to fixIncrease the contrast between the text and background colors by adjusting the CSS styles for the '.head' class, ensuring a minimum contrast ratio of 4.5:1 for normal text.
ComponentRef 90S7WQ
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.btn-lg.btn-primary[href$="signup.html"]Accessible nameStart free
Markup
<a class="btn btn-primary btn-lg" href="signup.html">Start free</a>
How to fixIncrease the contrast between the text color and background color of the button to meet the minimum contrast ratio thresholds, such as using a darker or lighter background color, or a more vibrant text color.
ComponentRef AK7DXM
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
h1 > emAccessible namefully evolved.
Markup
<em>fully evolved.</em>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade for either the text or the background, ensuring a minimum contrast ratio of 4.5:1 for normal text.
ComponentRef XI7WI7
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.product-footer > div:nth-child(1) > spanAccessible nameauto-matched
Markup
<span>auto-matched</span>
How to fixIncrease the contrast between the text and background colors by using a color with sufficient lightness difference, or add a background image or texture to improve readability.
ComponentRef VG0NIS
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.chat-pillAccessible nameHISAB Copilot
Markup
<div class="chat-pill">HISAB Copilot</div>
How to fixIncrease the contrast between the text color and background color by using a color combination that meets the WCAG 2.1 guidelines for minimum contrast ratio.
ComponentRef VKNNOF
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.hero-subAccessible nameChat with your spreadsheet. HISAB 360 reads sheets, writes formulas, runs
Python, reconciles with your ERP, and drafts reports — all by conversation,
all inside Excel.
Markup
<p class="hero-sub">
Chat with your spreadsheet. HISAB 360 reads sheets, writes formulas, runs
Python, reconciles with your ERP, and drafts reports — all by conversation,
all inside Excel.
</p>How to fixIncrease the contrast between the text and background colors by adjusting the CSS styles for the paragraph element, ensuring the contrast ratio meets the WCAG 2.1 guidelines.
ComponentRef ZYBPFX
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.hero-proof-grid > div:nth-child(1) > strongAccessible name14x
Markup
<strong>14x</strong>
How to fixIncrease the contrast between the text color and the background color by using a color with sufficient difference in brightness and saturation.
ComponentRef A3VLM3
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
a[href$="#video"]Accessible nameWatch the demo
Markup
<a class="btn btn-ghost btn-lg" href="#video">Watch the demo</a>
How to fixIncrease the contrast between the text color and background color of the button to meet the minimum contrast ratio thresholds, such as using a darker or lighter background color, or a more vibrant text color.
ComponentRef CLA8RV
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.ok:nth-child(8)Accessible nameMatched
Markup
<span class="ok">Matched</span>
How to fixIncrease the contrast between the text and background colors by using a color with sufficient lightness difference, or add a background image or overlay to enhance the contrast.
ComponentRef AZX7XI
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.chat-step.activeAccessible namePrepare review queue
Markup
<div class="chat-step active">Prepare review queue</div>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade for either the text or the background, ensuring a minimum contrast ratio of 4.5:1 for normal text.
ComponentRef 85U22S
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.hero-trust > span:nth-child(1)Accessible nameLocal-first workbook context
Markup
<span>Local-first workbook context</span>
How to fixIncrease the contrast between the text color and the background color by using a color with a higher contrast ratio, such as a darker or lighter shade.
ComponentRef 51WC1E
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.sheet-grid > span:nth-child(5)Accessible name1010 Cash
Markup
<span>1010 Cash</span>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio thresholds as defined by WCAG 2.1 SC 1.4.3.
ComponentRef 015PIO
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.product-chrome > strongAccessible nameMonth-end close workspace
Markup
<strong>Month-end close workspace</strong>
How to fixIncrease the contrast between the text color and background color by using a color with a higher contrast ratio, such as a darker or lighter shade, to make the text more readable.
ComponentRef PV3H29
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.nav-inner > .brand[href="index.html"] > .brand-markAccessible nameH
Markup
<span class="brand-mark">H</span>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade, or add an outline to the text to make it more readable.
ComponentRef DRTY36
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.warn:nth-child(12)Accessible nameReview
Markup
<span class="warn">Review</span>
How to fixIncrease the contrast between the text color and background color by using a color with sufficient lightness difference, or add a background image or overlay to enhance the contrast.
ComponentRef VOAJCW
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.badge-aiAccessible nameAI plan ready
Markup
<div class="product-badge badge-ai">AI plan ready</div>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade for either the text or the background, ensuring a minimum contrast ratio of 4.5:1 for normal text.
ComponentRef EPK4LW
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://hisab360.net/Element
.badge-secureAccessible nameDPAPI vault
Markup
<div class="product-badge badge-secure">DPAPI vault</div>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter background, or a more vibrant text color. Aim for a contrast ratio of at least 4.5:1 for normal text.
Medium
Content overflows horizontally on narrow viewports
ComponentRef BARFWO
The page scrolls horizontally at a mobile width, indicating content that does not reflow.
Affected page
https://hisab360.net/Element
htmlAccessible nameHISAB 360 — AI Excel Add-in for Accountants & Finance Teams
/* ============================================================
HISAB 360 — marketing site
Brand palette mirrors the VSTO addin
============================================================ */
:root {
--forest-900: #0a2b1c;
--forest-800: #0f3d28;
--forest-700: #145336;
--forest-600: #1a6b45;
--forest-500: #2c8c5d;
--forest-400: #4ea87a;
--forest-200: #b9dcc8;
--forest-100: #d4ecdd;
--forest-50: #effaf3;
--stone-900: #1a1a16;
--stone-800: #2c2c26;
--stone-700: #4a4a44;
--stone-600: #5a5a52;
--stone-500: #6e6e66;
--stone-400: #9a9a92;
--stone-300: #c2c2bb;
--stone-200: #dededa;
--stone-100: #ecece8;
--stone-50: #f5f5f1;
--bg-tint: #f3f1ea;
--danger: #b13a3a;
--warning: #b8742a;
--info: #2a6db8;
--accent: #b9872f;
--ink-blue: #223a5e;
--cyan: #59b8c6;
--violet: #6f5f9d;
--serif: "Times New Roman", Times, serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: "JetBrains Mono", "Cascadia Mono", Consolas, Menlo, monospace;
--max-w: 1360px;
--hero-w: 1480px;
--max-w-narrow: 880px;
--shadow-sm: 0 1px 2px rgba(14, 40, 25, 0.06);
--shadow: 0 4px 14px rgba(14, 40, 25, 0.08);
--shadow-lg: 0 20px 50px rgba(14, 40, 25, 0.12);
--shadow-xl: 0 30px 80px rgba(10, 43, 28, 0.18);
--radius-sm: 6px;
--radius: 9px;
--radius-lg: 14px;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
font-family: var(--sans);
color: var(--stone-900);
background: #fff;
-webkit-font-smoothing: antialiased;
line-height: 1.55;
font-size: 16px;
}
body::before {
content: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest-600); text-decoration: none; }
a:hover { color: var(--forest-900); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(34, 58, 94, 0.34);
outline-offset: 3px;
}
::selection { background: rgba(185, 135, 47, 0.25); color: var(--forest-900); }
hr { border: 0; border-top: 1px solid rgba(14, 40, 25, 0.1); margin: 36px 0; }
.skip-link {
position: fixed;
left: 16px;
top: 12px;
z-index: 500;
transform: translateY(-150%);
background: var(--stone-900);
color: white;
border-radius: 7px;
padding: 9px 13px;
font-size: 13px;
font-weight: 600;
transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); color: white; }
/* ============================== NAV ============================== */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(14, 40, 25, 0.08);
transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.nav.scrolled {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(14, 40, 25, 0.11);
box-shadow: 0 10px 28px rgba(14, 40, 25, 0.08);
}
.nav-inner {
width: 100%; margin: 0; padding: 13px clamp(18px, 4vw, 64px);
display: flex; align-items: center; gap: 24px;
}
.brand {
display: flex; align-items: center; gap: 10px;
color: var(--stone-900) !important; font-weight: 600;
}
.brand-mark {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 22px; font-weight: 700;
color: white; letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--forest-700) 0%, var(--ink-blue) 100%);
border-radius: 7px;
box-shadow: 0 1px 3px rgba(14, 40, 25, 0.25);
}
.brand-name {
font-family: var(--serif); font-size: 18px; font-weight: 600;
letter-spacing: 0.04em;
}
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--stone-700); font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--forest-700); }
.nav-menu-toggle {
display: none;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
margin-left: auto;
border: 1px solid rgba(14, 40, 25, 0.14);
border-radius: 8px;
background: rgba(255,255,255,0.72);
color: var(--forest-900);
cursor: pointer;
}
.nav-menu-toggle span,
.nav-menu-toggle::before,
.nav-menu-toggle::after {
content: "";
width: 16px;
height: 2px;
border-radius: 2px;
background: currentColor;
display: block;
transition: transform 180ms ease, opacity 180ms ease;
}
.nav-menu-toggle { flex-direction: column; gap: 4px; }
.nav.menu-open .nav-menu-toggle span { opacity: 0; }
.nav.menu-open .nav-menu-toggle::before { transform: translateY(6px) rotate(45deg); }
.nav.menu-open .nav-menu-toggle::after { transform: translateY(-6px) rotate(-45deg); }
.nav-cta { font-size: 14px; }
.nav-sign-in {
font-size: 14px; font-weight: 500; color: var(--stone-700);
margin-left: 8px;
}
.nav-sign-in:hover { color: var(--forest-700); }
/* ============================== BUTTONS ============================ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 9px 18px; border-radius: 7px;
font-weight: 600; font-size: 14px; font-family: var(--sans);
letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer;
transition: transform 120ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
white-space: nowrap; text-decoration: none;
min-height: 38px;
}
.btn-primary {
background: linear-gradient(135deg, var(--ink-blue), var(--forest-700)); color: white;
box-shadow: 0 1px 2px rgba(14, 40, 25, 0.2);
}
.btn-primary:hover { background: linear-gradient(135deg, #17273f, var(--forest-800)); color: white; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14, 40, 25, 0.25); }
.btn-ghost { background: transparent; color: var(--forest-900); border-color: rgba(14, 40, 25, 0.18); }
.btn-ghost:hover { background: rgba(14, 40, 25, 0.05); color: var(--forest-900); border-color: rgba(14, 40, 25, 0.3); }
.btn-light { background: white; color: var(--forest-900); border-color: rgba(14, 40, 25, 0.12); }
.btn-light:hover { background: var(--forest-50); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(177, 58, 58, 0.3); }
.btn-danger:hover { background: rgba(177, 58, 58, 0.06); }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 9px; }
.btn-xl { padding: 16px 32px; font-size: 16px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }
/* OAuth buttons */
.btn-oauth {
display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
padding: 11px 16px; border-radius: 8px; font-weight: 500; font-size: 14px;
background: white; border: 1px solid var(--stone-300); color: var(--stone-900);
transition: background 180ms ease, border-color 180ms ease;
cursor: pointer;
}
.btn-oauth:hover { background: var(--stone-50); border-color: var(--stone-400); color: var(--stone-900); }
.btn-oauth-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
/* ============================== HERO ============================== */
.hero {
max-width: var(--hero-w); margin: 0 auto; padding: 70px 40px 48px;
display: grid; grid-template-columns: minmax(440px, 0.88fr) minmax(620px, 1.12fr); gap: 84px; align-items: center;
perspective: 1400px;
}
.hero-inner { animation: heroTextIn 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-blue); margin: 0 0 14px 0;
}
.hero-title {
font-family: var(--serif); font-size: 72px; font-weight: 600;
line-height: 1.05; letter-spacing: -0.02em; color: var(--forest-900);
margin: 0 0 22px 0;
}
.hero-title em { font-style: italic; font-weight: 400; color: var(--forest-600); }
.hero-sub { font-size: 19px; color: var(--stone-700); margin: 0 0 32px 0; max-width: 560px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { font-size: 13px; color: var(--stone-500); margin: 18px 0 0 0; }
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
max-width: 560px;
}
.hero-trust span {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px solid rgba(14, 40, 25, 0.11);
border-radius: 999px;
background: rgba(255,255,255,0.58);
color: var(--stone-700);
font-size: 12.5px;
font-weight: 600;
box-shadow: var(--shadow-sm);
}
.hero-trust span::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.hero-proof-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
max-width: 560px;
margin-top: 18px;
}
.hero-proof-grid div {
padding: 14px 14px;
border: 1px solid rgba(14, 40, 25, 0.1);
border-radius: 12px;
background: rgba(255,255,255,0.55);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
}
.hero-proof-grid strong {
display: block;
font-family: var(--serif);
font-size: 27px;
line-height: 1;
color: var(--forest-900);
}
.hero-proof-grid span {
display: block;
margin-top: 5px;
font-size: 12px;
color: var(--stone-600);
}
.hero-diagram {
position: relative; border-radius: 16px; overflow: hidden;
box-shadow: var(--shadow-lg); border: 1px solid rgba(14, 40, 25, 0.08);
background: white;
}
.hero-diagram::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255,255,255,0.55);
pointer-events: none;
}
.hero-diagram img { width: 100%; }
.hero-product {
position: relative;
transform-style: preserve-3d;
animation: heroProductIn 900ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-product::before {
content: "";
position: absolute;
inset: 8% 4% -9%;
background: linear-gradient(135deg, rgba(34, 58, 94, 0.2), rgba(44, 140, 93, 0.14));
filter: blur(34px);
transform: translateZ(-1px);
}
.product-window {
position: relative;
overflow: hidden;
border: 1px solid rgba(14, 40, 25, 0.12);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,245,241,0.96));
box-shadow: var(--shadow-xl);
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
transition: transform 220ms ease, box-shadow 220ms ease;
}
.product-window::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 8%, rgba(255,255,255,0.46) 18%, transparent 30%);
transform: translateX(-120%);
animation: sheen 5.8s ease-in-out infinite;
pointer-events: none;
}
.product-chrome {
display: flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 0 18px;
border-bottom: 1px solid rgba(14, 40, 25, 0.08);
background: rgba(255,255,255,0.82);
}
.product-chrome span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--stone-300);
}
.product-chrome span:first-child { background: #c94b4b; }
.product-chrome span:nth-child(2) { background: #d6a642; }
.product-chrome span:nth-child(3) { background: #3b9c6b; }
.product-chrome strong {
margin-left: 8px;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone-600);
}
.product-body {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 380px;
}
.product-chat {
padding: 22px;
border-right: 1px solid rgba(14, 40, 25, 0.08);
background: linear-gradient(180deg, #17243a, #142522);
color: white;
}
.chat-pill {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.82);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.chat-prompt {
margin: 18px 0 24px;
font-family: var(--serif);
font-size: 21px;
line-height: 1.25;
color: white;
}
.chat-step {
position: relative;
margin-top: 10px;
padding: 10px 12px 10px 32px;
border-radius: 9px;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.76);
font-size: 12.5px;
}
.chat-step::before {
content: "";
position: absolute;
left: 12px;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
transform: translateY(-50%);
}
.chat-step.done::before { background: #66d49a; }
.chat-step.active {
background: rgba(255,255,255,0.16);
color: white;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.chat-step.active::before {
background: var(--accent);
box-shadow: 0 0 0 6px rgba(185,135,47,0.18);
animation: pulseDot 1.8s ease-in-out infinite;
}
.product-sheet { padding: 22px; }
.sheet-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
color: var(--stone-600);
font-size: 12.5px;
}
.sheet-toolbar strong { color: var(--forest-900); font-size: 13px; }
.sheet-grid {
display: grid;
grid-template-columns: 1.2fr repeat(3, 1fr);
overflow: hidden;
border: 1px solid var(--stone-200);
border-radius: 10px;
background: white;
box-shadow: var(--shadow-sm);
}
.sheet-grid span {
min-height: 49px;
padding: 14px 12px;
border-right: 1px solid var(--stone-100);
border-bottom: 1px solid var(--stone-100);
color: var(--stone-700);
font-size: 13px;
}
.sheet-grid span:nth-child(4n) { border-right: 0; }
.sheet-grid .head {
min-height: 38px;
padding-block: 10px;
background: var(--forest-50);
color: var(--forest-900);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sheet-grid .ok,
.sheet-grid .warn {
font-weight: 700;
color: var(--forest-700);
}
.sheet-grid .warn { color: var(--warning); }
.product-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
border-top: 1px solid rgba(14, 40, 25, 0.08);
background: rgba(14, 40, 25, 0.08);
}
.product-footer div {
padding: 16px 18px;
background: rgba(255,255,255,0.84);
}
.product-footer strong {
display: block;
font-family: var(--serif);
font-size: 25px;
color: var(--forest-900);
line-height: 1;
}
.product-footer span {
display: block;
margin-top: 5px;
color: var(--stone-500);
font-size: 12px;
}
.product-badge {
position: absolute;
z-index: 2;
padding: 10px 13px;
border: 1px solid rgba(14, 40, 25, 0.11);
border-radius: 10px;
background: rgba(255,255,255,0.88);
box-shadow: var(--shadow);
color: var(--forest-900);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.badge-ai {
top: 58px;
right: -18px;
animation: floatBadge 4.8s ease-in-out infinite;
}
.badge-secure {
left: -20px;
bottom: 66px;
animation: floatBadge 5.4s 500ms ease-in-out infinite;
}
/* ============================== COMMAND CENTER ===================== */
.command-section {
position: relative;
overflow: hidden;
padding: 86px 0;
background:
linear-gradient(135deg, rgba(18,33,31,0.94), rgba(34,58,94,0.96) 56%, rgba(27,28,36,0.96)),
var(--ink-blue);
color: white;
}
.command-section::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.command-section::after {
content: "";
position: absolute;
right: 6%;
top: 14%;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(89,184,198,0.22), transparent 66%);
filter: blur(4px);
}
.command-wrap {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(360px, 0.88fr) minmax(520px, 1.12fr);
gap: 54px;
align-items: center;
}
.command-section .section-title,
.command-section .section-eyebrow { color: white; }
.command-section .section-sub { color: rgba(255,255,255,0.72); }
.command-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 620px;
margin-top: 30px;
}
.command-stats div {
padding: 18px 16px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
background: rgba(255,255,255,0.07);
backdrop-filter: blur(14px);
}
.command-stats strong {
display: block;
font-family: var(--serif);
font-size: 36px;
line-height: 1;
color: white;
}
.command-stats span {
display: block;
margin-top: 7px;
color: rgba(255,255,255,0.68);
font-size: 12.5px;
}
.command-console {
overflow: hidden;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 20px;
background: rgba(18, 28, 38, 0.72);
box-shadow: 0 28px 80px rgba(0,0,0,0.32);
backdrop-filter: blur(18px);
}
.console-topbar {
display: flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 18px;
border-bottom: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.05);
}
.console-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255,255,255,0.34);
}
.console-dot:first-child { background: #d66b5d; }
.console-dot:nth-child(2) { background: #d6b45d; }
.console-dot:nth-child(3) { background: #63c28b; }
.console-topbar strong {
margin-left: 8px;
color: rgba(255,255,255,0.72);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.console-query {
margin: 22px;
padding: 18px 18px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 16px;
background: rgba(255,255,255,0.08);
}
.console-query span {
display: block;
margin-bottom: 8px;
color: rgba(255,255,255,0.52);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.console-query strong {
display: block;
min-height: 54px;
color: white;
font-family: var(--serif);
font-size: 26px;
line-height: 1.25;
}
.console-query strong::after {
content: "";
display: inline-block;
width: 2px;
height: 0.9em;
margin-left: 3px;
background: var(--cyan);
vertical-align: -0.12em;
animation: cursorBlink 900ms steps(2, end) infinite;
}
.console-timeline {
display: grid;
gap: 10px;
padding: 0 22px 22px;
}
.console-step {
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
padding: 14px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
background: rgba(255,255,255,0.05);
transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.console-step.is-active {
background: rgba(89,184,198,0.14);
border-color: rgba(89,184,198,0.34);
transform: translateX(4px);
}
.console-step > span {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255,255,255,0.1);
color: white;
font-family: var(--mono);
font-size: 12px;
}
.console-step strong {
display: block;
color: white;
font-size: 14px;
}
.console-step small {
display: block;
margin-top: 4px;
color: rgba(255,255,255,0.6);
font-size: 12.5px;
line-height: 1.5;
}
.console-output {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.06);
}
.console-output div {
padding: 18px;
border-right: 1px solid rgba(255,255,255,0.1);
}
.console-output div:last-child { border-right: 0; }
.console-output span {
display: block;
color: rgba(255,255,255,0.55);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.console-output strong {
display: block;
margin-top: 5px;
color: white;
font-family: var(--serif);
font-size: 22px;
}
/* ============================== MODES ============================== */
.modes-section {
position: relative;
overflow: hidden;
background: #fff;
}
.modes-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 40px;
align-items: end;
}
.mode-switch {
display: inline-flex;
gap: 5px;
margin: 28px 0 18px;
padding: 5px;
border: 1px solid rgba(14,40,25,0.12);
border-radius: 12px;
background: rgba(255,255,255,0.68);
box-shadow: var(--shadow-sm);
}
.mode-switch button {
border: 0;
border-radius: 9px;
padding: 10px 18px;
background: transparent;
color: var(--stone-700);
font: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.mode-switch button.active {
background: var(--forest-900);
color: white;
box-shadow: 0 8px 18px rgba(10,43,28,0.18);
}
.mode-panel {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 220px 1fr 360px;
gap: 34px;
align-items: center;
min-height: 300px;
padding: 34px;
border: 1px solid rgba(14,40,25,0.1);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62)),
white;
box-shadow: var(--shadow-lg);
}
.mode-panel h3 {
margin: 0 0 10px;
font-family: var(--serif);
font-size: 33px;
line-height: 1.1;
color: var(--forest-900);
}
.mode-panel p {
margin: 0;
max-width: 640px;
color: var(--stone-700);
}
.mode-kicker {
margin-bottom: 10px !important;
color: var(--forest-700) !important;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mode-panel ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.mode-panel li {
padding: 12px 14px;
border: 1px solid rgba(14,40,25,0.09);
border-radius: 12px;
background: rgba(255,255,255,0.7);
color: var(--stone-800);
font-size: 13px;
font-weight: 700;
}
.mode-panel li::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 9px;
border-radius: 50%;
background: var(--accent);
}
.mode-orbit {
position: relative;
width: 180px;
height: 180px;
border: 1px solid rgba(14,40,25,0.1);
border-radius: 50%;
background:
radial-gradient(circle at center, var(--forest-900) 0 24%, transparent 25%),
radial-gradient(circle at center, rgba(34,58,94,0.12), transparent 62%);
}
.mode-orbit::before {
content: "H";
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
color: white;
font-family: var(--serif);
font-size: 40px;
font-weight: 800;
}
.mode-orbit span {
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
margin: -8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 8px rgba(185,135,47,0.12);
animation: orbit 8s linear infinite;
}
.mode-orbit span:nth-child(2) { animation-duration: 11s; animation-delay: -3s; background: var(--cyan); }
.mode-orbit span:nth-child(3) { animation-duration: 14s; animation-delay: -7s; background: var(--forest-500); }
/* Small hero variant (used on inner pages) */
.page-hero {
position: relative;
isolation: isolate;
overflow: hidden;
max-width: min(var(--max-w), calc(100% - 48px)); margin: 34px auto 30px; padding: 68px 34px 58px;
text-align: center;
border: 1px solid rgba(34, 58, 94, 0.1);
border-radius: 24px;
background: #fff;
box-shadow: var(--shadow-lg);
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(rgba(34,58,94,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(34,58,94,0.035) 1px, transparent 1px);
background-size: 38px 38px;
mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.page-hero::after {
content: "HISAB 360";
position: absolute;
right: 28px;
bottom: -18px;
z-index: -1;
color: rgba(34,58,94,0.05);
font-family: var(--serif);
font-size: clamp(68px, 12vw, 150px);
font-weight: 800;
line-height: 1;
}
.page-hero h1 {
font-family: var(--serif); font-size: 50px; font-weight: 600;
line-height: 1.1; letter-spacing: -0.02em; color: var(--forest-900);
margin: 0 0 16px 0;
}
.page-hero h1 em { font-style: italic; font-weight: 400; color: var(--forest-600); }
.page-hero p { font-size: 17px; color: var(--stone-700); max-width: 640px; margin: 0 auto; }
/* ============================== SECTIONS ============================ */
section { padding: 60px 0; }
section.alt-bg { background: #fff; border-top: 1px solid rgba(34, 58, 94, 0.07); border-bottom: 1px solid rgba(34, 58, 94, 0.07); }
section.dark-bg { background: linear-gradient(135deg, var(--forest-900) 0%, var(--ink-blue) 58%, var(--forest-700) 100%); color: white; }
section.dark-bg .section-title, section.dark-bg .section-eyebrow { color: white; }
section.dark-bg .section-eyebrow { color: rgba(255,255,255,0.7); }
section.tint-bg { background: #fff; border-top: 1px solid rgba(34, 58, 94, 0.06); }
.section-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section-inner.narrow { max-width: var(--max-w-narrow); }
.section-eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-blue); margin: 0 0 12px 0;
}
.page-hero > p:first-child { color: var(--ink-blue) !important; }
.section-title {
font-family: var(--serif); font-size: 38px; font-weight: 600;
line-height: 1.15; letter-spacing: -0.01em; color: var(--forest-900);
margin: 0 0 14px 0; max-width: 720px;
}
.section-sub {
font-size: 16px; color: var(--stone-700); margin: 0 0 40px 0; max-width: 640px;
}
.center { text-align: center; }
.section-title.centered,
.section-sub.centered { margin-left: auto; margin-right: auto; }
.section-compact { padding-top: 0; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.action-row.center { justify-content: center; }
.text-muted { color: var(--stone-500); }
.fine-print { font-size: 12.5px; color: var(--stone-500); }
.logo-band { padding: 32px 0; }
.logo-band-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--stone-500);
margin: 0 0 18px 0;
}
.logo-row {
display: flex;
justify-content: center;
gap: 52px;
flex-wrap: wrap;
font-family: var(--serif);
font-size: 19px;
color: var(--stone-500);
opacity: 0.92;
}
.logo-row span {
transition: transform 180ms ease, color 180ms ease;
}
.logo-row span:hover {
transform: translateY(-2px);
color: var(--forest-900);
}
/* ============================ FEATURE GRID ========================= */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid.three { grid-template-columns: repeat(3, 1fr); }
.feature-card {
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.62); border: 1px solid rgba(14, 40, 25, 0.08);
border-radius: 12px; padding: 26px 22px;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
.feature-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--forest-600), var(--accent), var(--ink-blue));
opacity: 0;
transition: opacity 220ms ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(14, 40, 25, 0.12);
border-color: rgba(14, 40, 25, 0.16);
background: white;
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
width: 42px; height: 42px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--forest-700) 0%, var(--ink-blue) 100%);
color: white; font-family: var(--serif); font-weight: 700; font-size: 17px;
letter-spacing: 0.02em; margin-bottom: 14px;
}
.feature-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0 0 8px 0; color: var(--forest-900); }
.feature-card p { font-size: 14px; color: var(--stone-700); margin: 0; line-height: 1.55; }
/* ============================== HOW IT WORKS ======================== */
.how-steps {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px;
}
.how-steps li { display: flex; gap: 18px; align-items: flex-start; }
.how-num {
width: 38px; height: 38px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--serif); font-weight: 700; font-size: 18px;
background: white; border: 2px solid var(--forest-600); color: var(--forest-700);
flex-shrink: 0;
}
.how-steps h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 6px 0 6px 0; color: var(--forest-900); }
.how-steps p { font-size: 14px; color: var(--stone-700); margin: 0; line-height: 1.55; }
.how-steps em { color: var(--forest-700); font-style: italic; }
/* ============================== VIDEO ============================= */
.video-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
/* Single featured demo (clip list removed) — full-width, centered, capped. */
.video-grid-single { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; }
/* Multiple self-contained demos — each card is a player + caption; wraps as more are added. */
.video-grid-multi { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); max-width: 1040px; margin-left: auto; margin-right: auto; align-items: start; }
.video-item { display: flex; flex-direction: column; }
.video-caption { margin-top: 14px; }
.video-caption h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0 0 5px; color: var(--stone-900); }
.video-caption p { margin: 0; font-size: 14px; color: var(--stone-500); line-height: 1.55; }
@media (max-width: 760px) { .video-grid-multi { grid-template-columns: 1fr; } }
/* Embedded walkthrough video inside docs articles. */
.docs-video { margin: 6px 0 22px; }
.docs-video video { width: 100%; aspect-ratio: 16/9; border-radius: 12px; box-shadow: var(--shadow-lg); background: #000; display: block; }
.docs-video-cap { font-size: 13px; color: var(--stone-500); margin: 8px 0 0; }
.video-main {
background:
linear-gradient(135deg, rgba(18,33,31,0.76), rgba(34,58,94,0.9)),
repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 58px),
var(--ink-blue);
border-radius: 14px;
overflow: hidden;
aspect-ratio: 16/9;
position: relative;
cursor: pointer;
box-shadow: var(--shadow-lg);
}
.video-main::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: 10%;
height: 22%;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 10px;
background:
linear-gradient(90deg, transparent 0 16%, rgba(255,255,255,0.12) 16% 17%, transparent 17% 100%),
linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
transform: translateY(6px);
animation: videoPanel 4.5s ease-in-out infinite;
z-index: 0;
}
.video-main::after {
content: "Reconcile > Match > Review > Post";
position: absolute;
left: 9%;
top: 12%;
padding: 7px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.76);
font-size: 12px;
letter-spacing: 0.06em;
z-index: 0;
}
.video-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.45; }
.video-overlay {
position: absolute; inset: 0;
z-index: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: linear-gradient(180deg, rgba(18,33,31,0.16) 0%, rgba(18,28,38,0.72) 100%);
color: white; text-align: center;
}
.video-play {
width: 72px; height: 72px; border-radius: 50%;
background: rgba(255,255,255,0.92); color: var(--forest-900);
display: flex; align-items: center; justify-content: center;
font-size: 26px; margin-bottom: 16px;
transition: transform 200ms ease, background 200ms ease;
}
.video-main:hover .video-play { transform: scale(1.08); background: white; }
.video-title { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0 0 4px 0; }
.video-meta { font-size: 13px; opacity: 0.7; }
/* Real embedded demo video — fills the .video-main box, sits above the CSS mockup. */
.video-player { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
background: #000; object-fit: contain; border-radius: 14px; display: block; }
.video-list { display: flex; flex-direction: column; gap: 10px; }
.video-list-item {
display: flex; gap: 12px; padding: 12px;
background: white; border: 1px solid rgba(14, 40, 25, 0.08);
border-radius: 10px; cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.video-list-item:hover { background: var(--forest-50); border-color: rgba(14, 40, 25, 0.15); transform: translateX(3px); }
.video-list-thumb {
width: 90px; height: 56px; flex-shrink: 0; border-radius: 6px;
background: linear-gradient(135deg, var(--forest-700), var(--forest-500));
display: flex; align-items: center; justify-content: center;
color: white; font-size: 18px;
}
.video-list-body h4 { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: var(--stone-900); }
.video-list-body p { margin: 0; font-size: 12px; color: var(--stone-500); }
/* ============================== PRICING ============================ */
.pricing-toggle {
display: inline-flex; padding: 4px;
background: rgba(14,40,25,0.06); border-radius: 999px;
margin: 0 auto 36px; font-size: 13px;
}
.pricing-toggle button {
padding: 8px 18px; border: 0; background: transparent;
font-weight: 500; color: var(--stone-700); border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: inherit;
}
.pricing-toggle button.active { background: white; color: var(--forest-900); box-shadow: var(--shadow-sm); font-weight: 600; }
.pricing-save { color: var(--forest-600); font-weight: 600; font-size: 11px; margin-left: 4px; }
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
align-items: stretch;
}
.pricing-card {
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,249,245,0.92)); border: 1px solid rgba(34, 58, 94, 0.11);
border-radius: 14px; padding: 28px 24px;
display: flex; flex-direction: column;
position: relative;
box-shadow: var(--shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.pricing-card::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--ink-blue), var(--accent), var(--cyan));
opacity: 0;
transition: opacity 220ms ease;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(34,58,94,0.22);
}
.pricing-card:hover::after { opacity: 1; }
.pricing-card.featured { border-color: var(--accent); box-shadow: var(--shadow-xl); transform: scale(1.02); }
.pricing-card.featured::after { opacity: 1; }
.pricing-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: white; padding: 4px 12px;
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; border-radius: 999px;
}
.pricing-name { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--forest-900); margin: 0 0 4px 0; }
.pricing-tagline { font-size: 13px; color: var(--stone-500); margin: 0 0 24px 0; min-height: 36px; }
.pricing-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.pricing-amount .price-num { font-family: var(--serif); font-size: 44px; font-weight: 600; color: var(--forest-900); line-height: 1; }
.pricing-amount .price-period { font-size: 13px; color: var(--stone-500); }
.pricing-billed { font-size: 12px; color: var(--stone-500); margin-bottom: 22px; min-height: 16px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 24px 0; flex-grow: 1; }
.pricing-features li {
display: flex; gap: 8px; padding: 6px 0; font-size: 13.5px; color: var(--stone-800);
line-height: 1.45;
}
.pricing-features li::before { content: "✓"; color: var(--forest-600); font-weight: 700; flex-shrink: 0; }
.pricing-features li.muted::before { content: "—"; color: var(--stone-400); }
.pricing-features li.muted { color: var(--stone-500); }
/* Pricing comparison table */
.compare-table {
width: 100%; border-collapse: collapse;
background: white; border-radius: 12px; overflow: hidden;
box-shadow: var(--shadow-sm);
}
.compare-table th, .compare-table td {
padding: 13px 16px; text-align: left; font-size: 14px;
border-bottom: 1px solid var(--stone-100);
}
.compare-table thead th {
background: var(--forest-50); font-weight: 600; color: var(--forest-900);
font-size: 13px; letter-spacing: 0.04em;
}
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table tbody td:not(:first-child) { text-align: center; color: var(--stone-700); }
.compare-table tbody td:first-child { color: var(--stone-900); font-weight: 500; }
.compare-table .check { color: var(--forest-600); font-weight: 700; }
.compare-table .dash { color: var(--stone-400); }
.compare-table .grp {
background: var(--stone-50); font-weight: 600; color: var(--stone-700);
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
/* ============================== AUTH ============================= */
.auth-page {
min-height: calc(100vh - 64px);
display: flex; align-items: center; justify-content: center;
padding: 40px 24px;
}
.auth-card {
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.88); padding: 38px 36px;
border: 1px solid rgba(34, 58, 94, 0.12);
border-radius: 18px;
box-shadow: var(--shadow-xl);
max-width: 420px; width: 100%;
backdrop-filter: blur(14px);
}
.auth-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--ink-blue), var(--accent), var(--cyan));
}
.auth-card h1 {
font-family: var(--serif); font-size: 30px; font-weight: 600;
color: var(--forest-900); margin: 0 0 8px 0; text-align: center;
letter-spacing: -0.01em;
}
.auth-card .auth-sub {
text-align: center; font-size: 14px; color: var(--stone-600);
margin: 0 0 28px 0;
}
.auth-divider {
display: flex; align-items: center; gap: 12px;
color: var(--stone-400); font-size: 11px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
margin: 22px 0;
}
.auth-divider::before, .auth-divider::after {
content: ""; flex-grow: 1; height: 1px; background: var(--stone-200);
}
.auth-form .field { margin-bottom: 16px; }
.auth-form label { display: block; font-size: 13px; font-weight: 500; color: var(--stone-700); margin-bottom: 6px; }
.auth-form input[type=email],
.auth-form input[type=password],
.auth-form input[type=text],
.auth-form select,
.auth-form textarea {
width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
border: 1px solid var(--stone-300); border-radius: 7px; outline: none;
background: white; color: var(--stone-900);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.auth-form textarea { resize: vertical; min-height: 132px; }
.auth-form input:focus { border-color: var(--forest-500); box-shadow: 0 0 0 3px rgba(44, 140, 93, 0.15); }
.auth-form select:focus, .auth-form textarea:focus { border-color: var(--forest-500); box-shadow: 0 0 0 3px rgba(44, 140, 93, 0.15); }
.auth-link { font-size: 13px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--stone-600); }
/* OAuth icons (inline SVG colors hard-coded via brand) */
.oauth-icon-google { color: #4285F4; }
.oauth-icon-microsoft { color: #00A4EF; }
.oauth-icon-apple { color: #000; }
.oauth-icon-github { color: #24292f; }
/* ========================== USE-CASE / GRID ======================= */
.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.use-card {
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(34, 58, 94, 0.09);
border-radius: 12px;
padding: 24px 22px;
box-shadow: var(--shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
.use-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--ink-blue), var(--accent));
opacity: 0.2;
transition: opacity 220ms ease;
}
.use-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(34,58,94,0.18);
background: white;
}
.use-card:hover::before { opacity: 1; }
.use-card h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 0 0 8px 0; color: var(--forest-900); }
.use-card p { font-size: 13.5px; color: var(--stone-700); margin: 0; line-height: 1.55; }
/* ============================ DOCS LAYOUT ========================= */
.docs-wrap {
max-width: var(--max-w); margin: 0 auto; padding: 36px 24px 80px;
display: grid; grid-template-columns: 240px 1fr; gap: 36px;
}
.docs-sidebar {
position: sticky; top: 76px; align-self: start;
font-size: 14px; max-height: calc(100vh - 90px); overflow-y: auto;
padding: 14px;
border: 1px solid rgba(34,58,94,0.08);
border-radius: 16px;
background: rgba(255,255,255,0.58);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
}
.docs-sidebar h4 {
font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--stone-500);
margin: 18px 0 8px 0;
}
.docs-sidebar h4:first-child { margin-top: 0; }
.docs-sidebar ul { list-style: none; padding: 0; margin: 0 0 8px 0; }
.docs-sidebar li a {
display: block; padding: 6px 10px; border-radius: 6px;
color: var(--stone-700); font-size: 14px;
}
.docs-sidebar li a:hover { background: rgba(14, 40, 25, 0.05); color: var(--forest-900); }
.docs-sidebar li a.active { background: var(--forest-50); color: var(--forest-900); font-weight: 600; }
.docs-content {
max-width: 800px;
padding: 26px 30px;
border: 1px solid rgba(34,58,94,0.08);
border-radius: 18px;
background: rgba(255,255,255,0.68);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
}
.docs-content h1 {
font-family: var(--serif); font-size: 36px; font-weight: 600;
color: var(--forest-900); margin: 0 0 8px 0; letter-spacing: -0.01em;
}
.docs-content .docs-lede { font-size: 17px; color: var(--stone-600); margin: 0 0 36px 0; }
.docs-content h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--forest-900); margin: 36px 0 12px; }
.docs-content h3 { font-size: 17px; font-weight: 600; color: var(--stone-900); margin: 24px 0 10px; }
.docs-content p { font-size: 15px; color: var(--stone-800); margin: 0 0 14px 0; line-height: 1.65; }
.docs-content code {
background: var(--stone-100); color: var(--forest-900);
padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: 13.5px;
}
.docs-content pre {
background: var(--forest-900); color: #d9e8df;
padding: 16px 18px; border-radius: 10px; overflow-x: auto;
font-family: var(--mono); font-size: 13.5px; line-height: 1.6;
margin: 16px 0 22px;
}
.docs-content pre code { background: transparent; color: inherit; padding: 0; }
.docs-content ul, .docs-content ol { padding-left: 22px; margin: 0 0 18px 0; }
.docs-content ul li, .docs-content ol li { margin-bottom: 6px; font-size: 15px; color: var(--stone-800); }
.docs-content blockquote {
margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--forest-500);
background: var(--forest-50); border-radius: 0 7px 7px 0;
font-size: 14.5px; color: var(--stone-800);
}
.docs-callout {
display: block; padding: 14px 16px;
border-radius: 8px; margin: 18px 0; font-size: 14px; line-height: 1.6;
}
.docs-callout.info { background: #e4eff7; border: 1px solid #c1d8eb; color: #1c4a73; }
.docs-callout.warn { background: #fbf2e3; border: 1px solid #ecd9b1; color: #6b4d12; }
.docs-callout.tip { background: var(--forest-50); border: 1px solid var(--forest-200); color: var(--forest-900); }
.docs-callout strong { font-weight: 600; }
.docs-callout p { margin: 6px 0 0; }
.docs-callout ul { margin: 8px 0 0; padding-left: 20px; }
.docs-callout li { margin: 3px 0; }
.docs-callout kbd {
font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.18);
border-radius: 4px; padding: 1px 5px;
}
.docs-pager {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-top: 56px; padding-top: 28px;
border-top: 1px solid var(--stone-200);
}
.docs-pager a {
padding: 16px 18px; border: 1px solid var(--stone-200);
border-radius: 10px; background: white; color: var(--stone-700);
transition: border-color 160ms ease, color 160ms ease;
}
.docs-pager a:hover { border-color: var(--forest-500); color: var(--forest-900); }
.docs-pager a .docs-pager-label { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 4px; }
.docs-pager a .docs-pager-title { font-family: var(--serif); font-size: 15px; font-weight: 500; }
.docs-pager .next { text-align: right; }
/* ============================== ACCOUNT LAYOUT ===================== */
.acct-wrap {
max-width: var(--max-w); margin: 0 auto; padding: 36px 24px 80px;
display: grid; grid-template-columns: 240px 1fr; gap: 36px;
}
.acct-sidebar { font-size: 14px; }
.acct-sidebar .acct-user {
display: flex; gap: 10px; align-items: center;
padding: 12px; border-radius: 10px; background: white;
border: 1px solid var(--stone-200); margin-bottom: 18px;
}
.acct-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--forest-700), var(--forest-500));
color: white; font-family: var(--serif); font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-size: 15px; flex-shrink: 0;
}
.acct-user-meta { font-size: 12.5px; }
.acct-user-meta .acct-name { font-weight: 600; color: var(--stone-900); }
.acct-user-meta .acct-email { color: var(--stone-500); }
.acct-nav { list-style: none; padding: 0; margin: 0; }
.acct-nav a {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 7px; font-size: 14px;
color: var(--stone-700); margin-bottom: 2px;
}
.acct-nav a:hover { background: rgba(14, 40, 25, 0.05); color: var(--forest-900); }
.acct-nav a.active { background: var(--forest-50); color: var(--forest-900); font-weight: 600; }
.acct-nav .acct-nav-icon { width: 16px; text-align: center; opacity: 0.8; }
.acct-nav-sep { height: 1px; background: var(--stone-200); margin: 12px 0; }
.acct-content h1 {
font-family: var(--serif); font-size: 32px; font-weight: 600;
margin: 0 0 6px 0; color: var(--forest-900); letter-spacing: -0.01em;
}
.acct-content .acct-page-sub {
font-size: 14px; color: var(--stone-600); margin: 0 0 28px 0;
}
.acct-card {
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.82); border: 1px solid rgba(34,58,94,0.1);
border-radius: 16px; padding: 22px 24px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.acct-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: rgba(34,58,94,0.18);
}
.acct-card-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
}
.acct-card-head h3 {
font-family: var(--serif); font-size: 18px; font-weight: 600;
color: var(--forest-900); margin: 0;
}
.acct-card-head .acct-card-meta { font-size: 12.5px; color: var(--stone-500); }
.acct-stat-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
margin-bottom: 16px;
}
.acct-stat {
background: rgba(255,255,255,0.82); border: 1px solid rgba(34,58,94,0.1);
border-radius: 14px; padding: 16px 18px;
box-shadow: var(--shadow-sm);
transition: transform 200ms ease, box-shadow 200ms ease;
}
.acct-stat:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.acct-stat .acct-stat-label {
font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--stone-500); margin-bottom: 6px;
}
.acct-stat .acct-stat-val {
font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--forest-900);
}
.acct-stat .acct-stat-trend { font-size: 12px; color: var(--forest-600); margin-top: 4px; }
.acct-license {
display: grid; grid-template-columns: 1fr auto; gap: 12px;
padding: 16px 18px; background: var(--forest-50);
border: 1px solid var(--forest-200); border-radius: 10px;
margin-bottom: 12px;
}
.acct-license-key {
font-family: var(--mono); font-size: 13px;
background: white; padding: 6px 10px;
border-radius: 5px; border: 1px solid var(--stone-200);
letter-spacing: 0.04em; color: var(--stone-900);
}
.acct-table {
width: 100%; border-collapse: collapse; font-size: 14px;
}
.acct-table th, .acct-table td {
padding: 11px 14px; text-align: left;
border-bottom: 1px solid var(--stone-100);
}
.acct-table thead th {
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--stone-500); font-weight: 600;
}
.acct-table tbody tr:last-child td { border-bottom: 0; }
.acct-table .num { text-align: right; font-family: var(--mono); }
.acct-pill {
display: inline-block; font-size: 11px; font-weight: 600;
padding: 3px 8px; border-radius: 999px; letter-spacing: 0.04em;
}
.acct-pill.ok { background: var(--forest-100); color: var(--forest-700); }
.acct-pill.muted { background: var(--stone-100); color: var(--stone-700); }
/* ============================== LEGAL ============================ */
/* Legal pages have no sidebar — override the docs 2-column grid so the article
isn't trapped in the 240px sidebar column. Single centered column instead. */
.docs-wrap.legal-page { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.legal-page .docs-content {
max-width: 840px;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(14, 40, 25, 0.08);
border-radius: var(--radius-lg);
padding: 34px 38px;
box-shadow: var(--shadow-sm);
}
.legal-page .docs-content h2:first-of-type { margin-top: 24px; }
/* ============================== FAQ ============================= */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
background: white; border: 1px solid var(--stone-200);
border-radius: 10px; padding: 14px 18px;
}
.faq-item summary {
cursor: pointer; font-family: var(--serif); font-size: 16px;
font-weight: 600; color: var(--forest-900); list-style: none;
display: flex; align-items: center; justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--forest-600); font-size: 22px; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
font-size: 14.5px; color: var(--stone-700);
margin: 10px 0 4px 0; line-height: 1.6;
}
/* ============================== CTA ============================= */
section.cta {
background: linear-gradient(135deg, #17191f 0%, var(--ink-blue) 58%, #263149 100%);
color: white;
}
.cta-inner { text-align: center; }
.cta-inner h2 { font-family: var(--serif); font-size: 42px; font-weight: 600; margin: 0 0 12px 0; letter-spacing: -0.01em; }
.cta-inner p { font-size: 16px; color: rgba(255, 255, 255, 0.8); margin: 0 0 28px 0; }
section.cta .btn-primary { background: white; color: var(--forest-900); }
section.cta .btn-primary:hover { background: var(--forest-50); color: var(--forest-900); }
.cta-meta { font-size: 13px !important; color: rgba(255, 255, 255, 0.6) !important; margin-top: 24px !important; }
.cta-meta a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; }
/* ============================== FOOTER ============================ */
.footer { background: var(--stone-900); color: rgba(255,255,255,0.78); padding: 56px 0 28px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px;
margin-bottom: 36px;
}
.footer-brand-col .brand { color: white !important; }
.footer-brand-col p { font-size: 14px; color: rgba(255,255,255,0.55); margin: 12px 0 0 0; max-width: 240px; }
.social-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.social-links a {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 9px;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.82);
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.social-links svg {
width: 17px;
height: 17px;
fill: currentColor;
}
.social-links a:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.28);
color: white;
}
.footer-col h3, .footer-col h5 {
font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; color: white; margin: 0 0 16px 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.7); font-size: 14px; }
.footer-col a:hover { color: white; }
.footer-fine {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px; display: flex; justify-content: space-between;
font-size: 12.5px; color: rgba(255,255,255,0.5);
flex-wrap: wrap; gap: 12px;
}
.footer-fine a { color: rgba(255,255,255,0.7); }
.footer-featured {
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 18px; padding-top: 16px;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
font-size: 12px; color: rgba(255,255,255,0.4);
}
.footer-featured > span {
letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px;
}
.footer-featured a { color: rgba(255,255,255,0.58); }
.footer-featured a:hover { color: white; }
/* ============================== MODAL ============================ */
.modal-overlay {
position: fixed; inset: 0; background: rgba(14, 40, 25, 0.5);
display: none; align-items: center; justify-content: center;
z-index: 200; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
background: white; border-radius: var(--radius-lg);
padding: 28px 30px; max-width: 440px; width: 100%;
box-shadow: var(--shadow-lg);
}
.modal h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px 0; color: var(--forest-900); }
.modal p { font-size: 14.5px; color: var(--stone-700); margin: 0 0 22px 0; }
/* ============================== CONTACT DOCK ======================= */
.contact-dock {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 160;
font-family: var(--sans);
}
.contact-dock-toggle {
display: inline-flex;
align-items: center;
gap: 9px;
border: 0;
border-radius: 999px;
padding: 13px 17px;
background: linear-gradient(135deg, var(--forest-700), var(--ink-blue));
color: white;
box-shadow: 0 16px 36px rgba(10, 43, 28, 0.22);
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 800;
}
.contact-dock-toggle::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: #71e09e;
box-shadow: 0 0 0 6px rgba(113,224,158,0.16);
}
.contact-dock-panel {
position: absolute;
right: 0;
bottom: calc(100% + 12px);
width: min(330px, calc(100vw - 36px));
overflow: hidden;
border: 1px solid rgba(34, 58, 94, 0.12);
border-radius: 18px;
background: rgba(255,255,255,0.96);
box-shadow: var(--shadow-xl);
transform: translateY(10px) scale(0.98);
transform-origin: bottom right;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
backdrop-filter: blur(18px);
}
.contact-dock.open .contact-dock-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.contact-dock-head {
padding: 18px 18px 14px;
border-bottom: 1px solid rgba(34,58,94,0.08);
}
.contact-dock-head strong {
display: block;
color: var(--forest-900);
font-family: var(--serif);
font-size: 20px;
}
.contact-dock-head span {
display: block;
margin-top: 4px;
color: var(--stone-600);
font-size: 13px;
}
.contact-dock-actions {
display: grid;
gap: 8px;
padding: 12px;
}
.contact-dock-actions a,
.contact-dock-actions button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
border: 1px solid rgba(34,58,94,0.09);
border-radius: 12px;
padding: 12px 13px;
background: white;
color: var(--stone-800);
font: inherit;
font-size: 13.5px;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.contact-dock-actions a:hover,
.contact-dock-actions button:hover {
transform: translateY(-2px);
border-color: rgba(20,83,54,0.22);
box-shadow: var(--shadow-sm);
color: var(--forest-900);
}
.contact-dock-social {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 0 12px 12px;
}
.contact-dock-social a {
display: flex;
align-items: center;
justify-content: center;
min-height: 38px;
border: 1px solid rgba(34,58,94,0.09);
border-radius: 11px;
background: var(--stone-50);
color: var(--forest-900);
}
.contact-dock-social svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.contact-dock-social a:hover {
background: white;
box-shadow: var(--shadow-sm);
}
.contact-channel-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 22px;
}
.contact-channel {
display: flex;
min-height: 112px;
flex-direction: column;
justify-content: space-between;
padding: 18px;
border: 1px solid rgba(34,58,94,0.1);
border-radius: 14px;
background: white;
color: var(--stone-800);
box-shadow: var(--shadow-sm);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.contact-channel:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: rgba(20,83,54,0.18);
color: var(--forest-900);
}
.contact-channel strong {
font-family: var(--serif);
font-size: 19px;
color: var(--forest-900);
}
.contact-channel span {
color: var(--stone-500);
font-size: 13px;
}
/* ============================== TUTORIALS ========================== */
.tutorial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.tutorial-card {
position: relative;
overflow: hidden;
min-height: 250px;
display: flex;
flex-direction: column;
padding: 24px;
border: 1px solid rgba(34,58,94,0.1);
border-radius: 16px;
background: white;
box-shadow: var(--shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.tutorial-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--forest-600), var(--accent), var(--ink-blue));
opacity: 0;
transition: opacity 220ms ease;
}
.tutorial-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(20,83,54,0.18);
}
.tutorial-card:hover::before,
.tutorial-card.featured::before { opacity: 1; }
.tutorial-card.featured {
border-color: rgba(185,135,47,0.34);
box-shadow: var(--shadow);
}
.tutorial-meta {
color: var(--stone-500);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tutorial-card h3 {
margin: 16px 0 10px;
font-family: var(--serif);
font-size: 23px;
line-height: 1.15;
color: var(--forest-900);
}
.tutorial-card p {
margin: 0 0 20px;
color: var(--stone-700);
font-size: 14px;
}
.tutorial-card a {
margin-top: auto;
font-weight: 800;
}
.tutorial-track-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.tutorial-track-grid div {
padding: 20px;
border: 1px solid rgba(34,58,94,0.1);
border-radius: 14px;
background: white;
box-shadow: var(--shadow-sm);
}
.tutorial-track-grid strong {
display: block;
font-family: var(--serif);
font-size: 19px;
color: var(--forest-900);
}
.tutorial-track-grid span {
display: block;
margin-top: 7px;
color: var(--stone-600);
font-size: 13px;
}
/* ============================== MOTION ============================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@keyframes heroTextIn {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroProductIn {
from { opacity: 0; transform: translateY(26px) rotateX(4deg) scale(0.985); }
to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@keyframes sheen {
0%, 42% { transform: translateX(-120%); }
58%, 100% { transform: translateX(120%); }
}
@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 4px rgba(185,135,47,0.14); }
50% { box-shadow: 0 0 0 9px rgba(185,135,47,0.06); }
}
@keyframes floatBadge {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes videoPanel {
0%, 100% { opacity: 0.78; transform: translateY(6px); }
50% { opacity: 1; transform: translateY(0); }
}
@keyframes cursorBlink {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0; }
}
@keyframes orbit {
from { transform: rotate(0deg) translateX(84px) rotate(0deg); }
to { transform: rotate(360deg) translateX(84px) rotate(-360deg); }
}
/* ============================ RESPONSIVE =========================== */
@media (max-width: 1100px) {
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.hero { grid-template-columns: minmax(340px, 0.9fr) minmax(460px, 1.1fr); gap: 44px; }
.product-body { grid-template-columns: 190px 1fr; }
.command-wrap { grid-template-columns: 1fr; }
.command-console { max-width: 860px; }
.modes-head { grid-template-columns: 1fr; gap: 12px; }
.mode-panel { grid-template-columns: 170px 1fr; }
.mode-panel ul { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
.mode-orbit { width: 150px; height: 150px; }
@keyframes orbit {
from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
to { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}
}
@media (max-width: 980px) {
.hero { grid-template-columns: 1fr; padding: 40px 24px; gap: 30px; }
.hero-title { font-size: 48px; }
.hero-product { max-width: 760px; width: 100%; }
.command-section { padding: 64px 0; }
.command-stats { grid-template-columns: 1fr 1fr 1fr; }
.how-steps { grid-template-columns: 1fr; gap: 22px; }
.use-grid, .feature-grid.three { grid-template-columns: repeat(2, 1fr); }
.docs-wrap, .acct-wrap { grid-template-columns: 1fr; }
.docs-sidebar, .acct-sidebar { position: static; max-height: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.video-grid { grid-template-columns: 1fr; }
.acct-stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.nav-inner { gap: 10px; padding: 11px 16px; flex-wrap: wrap; }
.brand-name { font-size: 16px; }
.nav-menu-toggle { display: inline-flex; }
.nav-links {
display: none;
order: 10;
width: 100%;
margin-left: 0;
padding: 8px 0 4px;
gap: 4px;
flex-direction: column;
}
.nav.menu-open .nav-links { display: flex; }
.nav-links a {
padding: 10px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.58);
}
.nav-sign-in { margin-left: 0; }
.nav-cta { padding-inline: 12px; }
.hero-title { font-size: 38px; }
.hero { padding-inline: 18px; }
.hero-cta .btn { width: 100%; }
.hero-trust { gap: 6px; }
.hero-proof-grid { grid-template-columns: 1fr; }
.command-wrap { gap: 30px; }
.command-stats,
.console-output { grid-template-columns: 1fr; }
.console-output div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.console-output div:last-child { border-bottom: 0; }
.console-query strong { font-size: 21px; min-height: 78px; }
.console-step { grid-template-columns: 34px 1fr; }
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.mode-switch button { padding-inline: 10px; }
.mode-panel { grid-template-columns: 1fr; padding: 24px 20px; }
.mode-panel h3 { font-size: 27px; }
.mode-panel ul { grid-template-columns: 1fr; }
.mode-orbit { margin: 0 auto; }
.product-body { grid-template-columns: 1fr; }
.product-chat { border-right: 0; border-bottom: 1px solid rgba(14, 40, 25, 0.08); }
.product-sheet { padding: 16px; overflow-x: auto; }
.sheet-grid { min-width: 560px; }
.product-footer { grid-template-columns: 1fr; }
.product-badge { display: none; }
.feature-grid, .feature-grid.three, .use-grid, .pricing-grid { grid-template-columns: 1fr; }
.cta-inner h2 { font-size: 30px; }
.section-title { font-size: 28px; }
.page-hero h1 { font-size: 36px; }
.footer-grid { grid-template-columns: 1fr; }
.footer-fine { flex-direction: column; }
.acct-stat-row { grid-template-columns: 1fr; }
.legal-page .docs-content { padding: 24px 20px; }
.contact-dock { right: 16px; bottom: 16px; }
.contact-dock-toggle span { display: none; }
.contact-dock-toggle { width: 52px; height: 52px; justify-content: center; padding: 0; }
.contact-dock-toggle::before { width: 11px; height: 11px; }
.contact-channel-grid { grid-template-columns: 1fr; }
.tutorial-grid,
.tutorial-track-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ==================================================================
MODERN ELEVATION LAYER (2026)
Evolves the forest / ink-blue identity into a more premium, modern
look — gradient-mesh hero, gradient headline, glass cards, modern
icon tiles, richer buttons. Enhances existing components by class
name only (no HTML changes). Continuous motion is neutralised by the
prefers-reduced-motion block above (it uses !important on *).
================================================================== */
:root {
--grad-brand: linear-gradient(135deg, #17273f 0%, #145336 54%, #2c8c5d 100%);
--glass-bg: rgba(255, 255, 255, 0.66);
--glass-brd: rgba(14, 40, 25, 0.10);
--lift: 0 18px 42px rgba(10, 43, 28, 0.14);
}
/* --- Gradient-mesh aurora behind the hero(s) --- */
.hero, .page-hero { position: relative; isolation: isolate; }
.hero::before, .page-hero::before {
content: ""; position: absolute; inset: -80px -60px -40px; z-index: -1;
pointer-events: none;
background:
radial-gradient(40% 60% at 14% 6%, rgba(44, 140, 93, 0.18), transparent 62%),
radial-gradient(38% 55% at 90% 0%, rgba(34, 58, 94, 0.18), transparent 62%),
radial-gradient(34% 50% at 62% 36%, rgba(185, 135, 47, 0.10), transparent 64%);
filter: blur(22px);
animation: auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(0, -16px, 0) scale(1.05); }
}
/* --- Gradient headline accent --- */
.hero-title em {
background: var(--grad-brand);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* --- Brand mark + active nav underline --- */
.brand-mark { background: var(--grad-brand); box-shadow: 0 6px 16px rgba(20, 83, 54, 0.32); }
.nav-links a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
border-radius: 2px; background: var(--grad-brand);
}
.nav-links a { position: relative; }
/* --- Hero eyebrow as a glass pill; section eyebrows get a gradient dash --- */
.hero-eyebrow {
display: inline-flex; align-items: center;
padding: 6px 13px; border-radius: 999px;
background: var(--glass-bg); border: 1px solid var(--glass-brd);
box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.section-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.section-eyebrow::before {
content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad-brand);
}
/* --- Primary buttons: richer gradient + inner highlight --- */
.btn-primary {
background: var(--grad-brand);
box-shadow: 0 8px 20px rgba(20, 83, 54, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover {
background: var(--grad-brand); filter: brightness(1.06);
box-shadow: 0 12px 28px rgba(20, 83, 54, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* --- Modern feature icon tiles --- */
.feature-icon {
background: var(--grad-brand); color: #fff;
border-radius: 14px; box-shadow: 0 10px 22px rgba(20, 83, 54, 0.22);
transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.05) rotate(-2deg); }
/* --- Glass cards with a refined lift --- */
.feature-card, .use-card, .pricing-card, .acct-card {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid var(--glass-brd);
transition: transform 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms ease, border-color 240ms ease;
}
.feature-card:hover, .use-card:hover, .acct-card:hover {
transform: translateY(-5px); box-shadow: var(--lift); border-color: rgba(44, 140, 93, 0.34);
}
.pricing-card:hover { box-shadow: var(--lift); border-color: rgba(44, 140, 93, 0.34); }
/* --- Logo band as refined pills --- */
.logo-row span {
padding: 8px 16px; border-radius: 999px;
background: var(--glass-bg); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-sm);
transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.logo-row span:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--forest-700); }
/* --- CTA section gets the brand gradient depth --- */
.cta { background: var(--grad-brand); }
/* ── Show/hide password toggle (eye button) ──────────────────────────
JS wraps each password input in .pw-wrap and appends .pw-toggle.
Placed last so the padding-right wins over the .auth-form input rule. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input.pw-input { width: 100%; padding-right: 42px; }
.pw-toggle {
position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0; margin: 0;
border: 0; background: transparent; cursor: pointer; line-height: 0;
color: var(--stone-400, #9a9a92); border-radius: 6px;
transition: color 140ms ease, background 140ms ease;
}
.pw-toggle:hover { color: var(--stone-700, #2e2e29); background: var(--stone-100, #eeeeea); }
.pw-toggle:focus-visible { outline: 2px solid var(--forest-400, #3ca06e); outline-offset: 1px; }
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-18254762528');
{"@context":"https://schema.org","@type":"Organization","name":"HISAB 360","url":"https://hisab360.net","logo":"https://hisab360.net/images/og-default.png","description":"AI-powered Microsoft Excel add-in for accountants and finance teams.","sameAs":["https://www.youtube.com/channel/UCGVJYcOJuFkyhEr06eDd1fA","https://www.linkedin.com/company/hisab360"]}
{"@context":"https://schema.org","@type":"WebSite","name":"HISAB 360","url":"https://hisab360.net"}
{"@context":"https://schema.org","@type":"SoftwareApplication","name":"HISAB 360","applicationCategory":"BusinessApplication","operatingSystem":"Windows; Microsoft Excel 2016 or later","description":"AI-powered Excel add-in that automates financial reporting, ERP reconciliation, sandboxed Python analysis and workflow scripting — all by chatting in plain English.","offers":{"@type":"AggregateOffer","priceCurrency":"USD","lowPrice":"7","highPrice":"199","offerCount":"4","offers":[{"@type":"Offer","name":"Perpetual","price":"199","priceCurrency":"USD","description":"One-time — use your own Anthropic or OpenAI account, every feature, all updates"},{"@type":"Offer","name":"Own AI","price":"7","priceCurrency":"USD","description":"Subscription with your own AI account — $7/month or $60/year, every feature"},{"@type":"Offer","name":"HISAB AI Basic","price":"10","priceCurrency":"USD","description":"$10/month, AI built in, 500 credits/month included"},{"@type":"Offer","name":"HISAB AI Plus","price":"20","priceCurrency":"USD","description":"$20/month, AI built in, 1,200 credits/month included"}]}}
.hc-root{position:fixed;right:20px;bottom:20px;z-index:9000;font-family:inherit;}.hc-fab{width:58px;height:58px;border-radius:50%;border:0;background:linear-gradient(145deg,#1a6b45,#145336);color:#fff;box-shadow:0 8px 24px rgba(20,83,54,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;}.hc-fab:hover{transform:translateY(-2px) scale(1.04);}.hc-fab.hc-open{transform:scale(.9);opacity:.85;}.hc-panel{position:absolute;right:0;bottom:74px;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 120px);background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(10,40,25,.28);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(14,40,25,.08);}.hc-head{background:linear-gradient(135deg,#1a6b45,#145336);color:#fff;padding:13px 14px;display:flex;align-items:center;gap:10px;}.hc-dot{width:9px;height:9px;border-radius:50%;background:#7ee0a8;box-shadow:0 0 0 3px rgba(126,224,168,.3);flex:none;}.hc-title{font-weight:700;font-size:14px;line-height:1.1;}.hc-sub{font-size:11.5px;opacity:.85;}.hc-x{margin-left:auto;background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.85;}.hc-panel[hidden]{display:none !important;}.hc-msgs{flex:1;overflow-y:auto;padding:14px;background:#f5f8f6;display:flex;flex-direction:column;gap:8px;}.hc-m{max-width:82%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;}.hc-ai{align-self:flex-start;background:#fff;color:#1c2b22;border:1px solid #e3ebe5;border-bottom-left-radius:4px;}.hc-owner{align-self:flex-start;background:#eaf5ee;color:#0f2e1d;border:1px solid #bfe3cc;border-bottom-left-radius:4px;}.hc-owner::before{content:"Support";display:block;font-size:10px;font-weight:700;color:#1a6b45;margin-bottom:2px;letter-spacing:.03em;}.hc-me{align-self:flex-end;background:linear-gradient(135deg,#1a6b45,#145336);color:#fff;border-bottom-right-radius:4px;}.hc-typing{opacity:.6;letter-spacing:2px;}.hc-input{display:flex;gap:8px;padding:10px;border-top:1px solid #eef2ee;background:#fff;}.hc-input input{flex:1;border:1px solid #d7e0d9;border-radius:10px;padding:9px 11px;font-size:13.5px;outline:none;font-family:inherit;}.hc-input input:focus{border-color:#1a6b45;}.hc-input button{width:40px;border:0;border-radius:10px;background:#145336;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}.hc-gate{display:flex;flex-direction:column;gap:8px;padding:13px 12px;border-top:1px solid #eef2ee;background:#fff;}.hc-gate[hidden],.hc-input[hidden]{display:none !important;}.hc-gate-t{font-size:12.5px;font-weight:700;color:#1c2b22;}.hc-gate-s{font-size:11px;color:#6b7c72;margin-top:-4px;}.hc-gate input{border:1px solid #d7e0d9;border-radius:9px;padding:9px 11px;font-size:13px;outline:none;font-family:inherit;}.hc-gate input:focus{border-color:#1a6b45;}.hc-gate button{border:0;border-radius:9px;background:#145336;color:#fff;cursor:pointer;padding:10px;font-size:13.5px;font-weight:600;font-family:inherit;}.hc-gate button:hover{background:#0f3f28;}.hc-gate-err{color:#c0392b;font-size:11.5px;}.hc-gate-err[hidden]{display:none;}@media(max-width:480px){.hc-root{right:12px;bottom:12px;}.hc-panel{width:calc(100vw - 24px);height:calc(100vh - 90px);bottom:70px;}}
HHISAB 360
Features
How it works
Use cases
Pricing
TutorialsDocs
Download
Sign in
Get HISAB
AI · Python · ERP · for Excel
Excel,fully evolved.
Chat with your spreadsheet. HISAB 360 reads sheets, writes formulas, runs
Python, reconciles with your ERP, and drafts reports — all by conversation,
all inside Excel.
Start free
Watch the demo
Windows · Excel 2016+ · Free 15-day trial with 50 AI credits
Local-first workbook context
Approval-gated writes
Audit trail by default
Macro and ribbon builder
14xfaster close checks
0unreviewed ERP posts
100%write traceability
Month-end close workspace
HISAB Copilot
Reconcile bank statement with GL and draft adjustments.
Read workbook context
Run Python matching
Prepare review queue
Bank_Recon.xlsx
Variance review
AccountBankGLStatus
1010 Cash$284,920$284,920Matched
1040 Clearing$18,440$17,920Review
2200 Accruals$9,650$9,650Matched
4310 Revenue$76,300$75,880Draft JE
97.8%auto-matched
12items for approval
0ERP posts without review
AI plan ready
DPAPI vault
The HISAB command layer
Not a chatbot. A controlled finance operating system inside Excel.
HISAB turns a plain-English request into a governed workflow: gather only the needed workbook context, run the right skill, reconcile with Python, route risky writes for approval, then leave an audit trail a controller can defend.
0% less manual matching
0control gates before ERP posting
0second audit-log export
Live close command
Ask HISAB
Pull Zoho trial balan
01
Scope workbookHeaders, selected ranges, sample rows. No full workbook upload.
02
Run local Python pipelineOffline scripts process exports, folders, checks, report packs, and repeatable close routines.
03
Generate reproducible reportsException table, refreshed workpapers, draft journals, narrative commentary, evidence links.
04
Approval gateController approves workbook writes and any ERP push before execution.
Matched1,248 rows
Exceptions17 items
Draft JEs6 entries
Built for finance teams using
Odoo
Xero
QuickBooks Online
Zoho Books
FreshBooks
Governance by design
Choose how brave the automation is allowed to be.
Every team has a different risk appetite. HISAB lets finance leaders define the operating mode before a single cell changes.
Ask-only
Plan
Action
Automate
Ask-only mode
Read-only intelligence for regulated close work.
HISAB can analyze, explain, and prepare outputs, but cannot write to cells or post back to ERP. Ideal for audit prep, board packs, and first-time reviews.
Workbook context minimized
No write operations
Exportable evidence pack
See it in action
Watch HISAB 360 do the work.
Real demos — plain-English prompts in, finished work in your sheet. More on the way.
Your browser can't play this video.
Download the demo (MP4).
Build a VBA toolkit & custom ribbon
HISAB writes the VBA macros and wires up a matching Excel ribbon from plain-English prompts — no VBA editor required.
Your browser can't play this video.
Download the demo (MP4).
Offline Python bank reconciliation
Match a bank statement to the GL with sandboxed Python, flag the exceptions, then save it as a repeatable script that re-runs every period — fully offline.
Your browser can't play this video.
Download the demo (MP4).
Read & write your ERP from Excel
Pull live data from Odoo, then post changes back — staged for your approval, with every write logged. The same flow works for Xero, QuickBooks and Zoho.
Your browser can't play this video.
Download the demo (MP4).
Connect Zoho Books to Excel
Pull live Zoho Books data into Excel and post changes back — invoices, bills, contacts — staged for your approval, with every write logged.
Your browser can't play this video.
Download the demo (MP4).
Build a 3-statement financial model
Watch HISAB 360 build a startup projection — income statement, balance sheet and cash flow — from a prompt. ⬇ Download the free model (Excel)
Your browser can't play this video.
Download the demo (MP4).
Post invoices to QuickBooks Online
Point HISAB at a folder of vendor invoice PDFs — it matches each to the right vendor and line item in QuickBooks Online, stages them as Bills for your review, then posts them on your approval. The same flow works for Xero, Zoho and Odoo.
Four pillars
Everything finance teams want, inside Excel.
AI
AI-driven
Chat in plain English. Claude reads your sheets, understands your intent, and writes the formulas. No syntax to memorise.
Py
Python-powered
Heavy analyses run in a sandboxed Python — pandas, numpy, openpyxl, plotly — results written straight back to your sheet.
Run
Offline automation
Run repeatable Python scripts offline to process files, rebuild reports, refresh workpapers, and reproduce the same outputs every period.
ERP
ERP-native
Pull data from Odoo, Xero, QuickBooks Online, Zoho Books, and FreshBooks. OAuth, REST, and OData connectors — all wired in.
✓
Audit-grade
Every write journaled. Destructive ops need approval. DPAPI-encrypted credentials. Built for finance, not for demos.
Rbn
Macros + ribbons
Generate VBA macros, custom Excel ribbon buttons, and repeatable workflow commands from plain-English instructions.
PQ
Power Query, by AI
Combine a folder of Excel or CSV files into one refreshable table — the AI writes the Power Query for you, then refreshes it every month.
Drl
Drill-down totals
Double-click any total to expand the transactions behind it, inline — then collapse them again. No pivot table required.
Say
Voice advisor — meet Sahib & Sahiba
Prefer to talk? Dictate into the chat and a spoken advisor answers back — Sahib (male) or Sahiba (female) — with natural neural voices via your own OpenAI or Google key, or the built-in Windows voice for free (details: voice-controlled Excel). See how →
See all features →
How it works
From spreadsheet to insight in one conversation.
1
You ask in plain English.
"Reconcile bank statement with the bank book, flag mismatches over ₹500."
2
HISAB sends sheet context to the AI.
Sheet names, ranges, headers, sample rows — only what's needed, never the full workbook. Your data stays on your machine.
3
The AI generates Python or formulas.
Complex analyses run in sandboxed Python; simple changes write straight to cells. You see every step in the chat.
4
Results land in your sheet.
Reports, pivots, flagged rows, summary tables — exactly where you asked. Every write is in the audit log.
Use cases
Built for the people who close the books.
Month-end close
Accruals, reconciliations, variance analysis — drafted by AI, reviewed by you, posted in minutes instead of hours.
Bank reconciliation
Drop a bank statement next to your bank book. HISAB matches transactions, flags mismatches, drafts journal entries.
ERP exports
Pull GL trial balances, AR/AP ageing, inventory snapshots. Clean, pivot, summarise — without ever leaving Excel.
Audit prep
Sample selection, control testing workpapers, deficiency classification — generated, never invented. Every step traceable.
Management reporting
Period-over-period P&L, waterfall variance, narrative explanations — drafted in your existing template.
Ad-hoc analysis
"Show me which customers paid late this quarter." Sixty seconds later: the answer, in your sheet.
More use cases →
Why teams choose HISAB
"What took our team a full Friday afternoon — reconciling 14 bank accounts against the GL — now finishes by lunchtime on Monday. We didn't replace anyone; we just stopped wasting their time on the mechanical part."
Faisal Ahmed · Controller, Mid-cap manufacturing · Karachi
Try HISAB 360
Free 15-day trial — every feature plus 50 HISAB AI credits. Windows, Excel 2016 or later. Five-minute install.
Start free trial
No credit card required. See pricing →
HHISAB 360
AI-driven Excel, Python and ERP automation. Built for finance teams.
Product
Features
Pricing
Use cases
Changelog
Resources
Documentation
Blog
Free formula generator
Getting started
Authoring skills
FAQ
Company
About
Contact
Security
Privacy
Account
Sign in
Create account
License keys
Billing
© 2026 HISAB 360 · Excel, fully evolved.
Terms · Privacy · DPA
Featured on
SubmitAITools
Dofollow.Tools
Thank John
Preview only
This is a preview of the experience.
Got it
Contact
Talk to HISAB
Sales, support, demo, or launch questions.
Live chat Ask AI
Contact page Open
Email [email removed] Send
Support desk Help
HISAB 360Ask us anything×Before we start — how can we reach you?So a real person can follow up. Takes 10 seconds.Start chat
Markup
<html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>HISAB 360 — AI Excel Add-in for Accountants & Finance Teams</title> <meta name="description" content="HISAB 360 is an AI-powered Excel add-in for accountants — automate financial reporting, reconcile your ERP and run Python by chatting in plain English."> <style data-inlined="style.css"> /* ============================================================ HISAB 360 — marketing site Brand palette mirrors the VSTO addin =======================================…
How to fixEnsure that the page content is responsive and adapts to different screen sizes by using relative units, flexible grids, and media queries to prevent horizontal scrolling.
Medium
<video> elements must have captions
ComponentRef H1N3FF
<video> elements must have captions
Affected page
https://hisab360.net/Element
.video-item:nth-child(1) > .video-main > videoAccessible nameYour browser can't play this video.
Download the demo (MP4).
Markup
<video class="video-player" controls="" preload="none" playsinline="" data-poster="https://dl.hisab360.net/media/hisab-360-poster.webp">
How to fixAdd captions to the video by including a track element with a kind attribute set to 'captions' and a src attribute pointing to a caption file.
Low
Video may be missing captions
ComponentRef WFGCJT
A video element has no captions or subtitles track. Whether captions are needed depends on the audio content and requires manual review.
Affected page
https://hisab360.net/Element
section#video > div > div > div:nth-of-type(1) > div:nth-of-type(1) > videoAccessible nameYour browser can't play this video.
Download the demo (MP4).
Markup
<video class="video-player" controls="" preload="none" playsinline="" data-poster="https://dl.hisab360.net/media/hisab-360-poster.webp">
<source src="https://dl.hisab360.net/media/hisab-360-demo.mp4" type="video/mp4">
Your browser can't play this video.
<a href="https://dl.hisab360.net/media/hisab-360-demo.mp4">Download the demo (MP4)</a>.
</video>How to fixAdd captions or subtitles to the video, or provide an alternative way for users to access the information, such as a transcript. If the video does not contain spoken language, consider adding a note to indicate this.
05 · Pages inspected
06 · About this assessment
Evolize inspects publicly accessible website pages using automated browser-based testing and deterministic accessibility rules. Automated testing can identify many reproducible technical issues but cannot determine complete WCAG or legal compliance.
- Publicly accessible surfaces only — no credentials, private systems, or source-code access.
- Findings apply to the pages and states successfully inspected; automated analysis may not detect every issue.
- Results reflect the site at the scan date and may have changed since.
Evolize provides digital risk intelligence and does not provide legal advice, certify compliance, or guarantee that litigation will not occur. Methodology · Security · Example assessment
07 · Continuous monitoring
This public report captures one assessment. Evolize monitoring rescans the website, detects new and recurring findings, tracks changes over time and verifies corrections.
Is information in this report inaccurate or outdated? Request a correction or removal.