/* Self-hosted web fonts for vertexerp.co.in, taken from Google Fonts on 15 Sep 2026.
   Schibsted Grotesk, IBM Plex Sans, IBM Plex Mono and Kalam are all under the SIL Open Font License 1.1.
   Only the latin and latin-ext subsets (latin-ext carries the rupee sign). build-site.py publishes each
   file under /assets/fonts/ and rewrites these url()s. */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plex-mono-500-latin-ext.woff2?v=77f03e26f9) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plex-mono-500-latin.woff2?v=a76f53ca66) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/plex-mono-600-latin-ext.woff2?v=1b6b18fd0f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/plex-mono-600-latin.woff2?v=ad4580d8cb) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/plex-sans-latin-ext.woff2?v=ae1d854fef) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/plex-sans-latin.woff2?v=056e4e2459) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/plex-sans-latin-ext.woff2?v=ae1d854fef) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/plex-sans-latin.woff2?v=056e4e2459) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/plex-sans-latin-ext.woff2?v=ae1d854fef) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/plex-sans-latin.woff2?v=056e4e2459) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/kalam-400-latin-ext.woff2?v=409a1c973b) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/kalam-400-latin.woff2?v=257f0129d5) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/kalam-700-latin-ext.woff2?v=ece1261539) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/kalam-700-latin.woff2?v=c1bc509226) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin-ext.woff2?v=f5df746dbc) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin.woff2?v=e3b56e9051) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin-ext.woff2?v=f5df746dbc) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin.woff2?v=e3b56e9051) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin-ext.woff2?v=f5df746dbc) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin.woff2?v=e3b56e9051) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin-ext.woff2?v=f5df746dbc) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin.woff2?v=e3b56e9051) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin-ext.woff2?v=f5df746dbc) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin.woff2?v=e3b56e9051) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Vertex ERP homepage — design file.
 *
 * BLACK IS THE DEFAULT, on Arpan's instruction of 14 September 2026 ("make a
 * black theme"). That reverses the "never black" rule for the website design
 * only. A light version sits one click away in the nav, so the two can be
 * compared; an explicit light choice in the viewer also shows it.
 *
 * Kept deliberately apart from VartaAPI's new dark site: its black is warm grey
 * (#17171A) with orange and coloured headline words. This black leans green,
 * the second colour is the software's own amber accelerator, and headlines stay
 * one colour.
 *
 * REVISION 3, same day: Arpan chose Forest & Sky out of the five options.
 * Green leads, sky blue answers, red is kept for ruling and amber for the
 * keycaps. The deep forest band and the footer stay dark in both themes.
 */
:root{
  color-scheme: dark;
  --bg:#07140E; --bg-2:#0A1B13; --surface:#0F241A; --surface-2:#143022;
  --line:#1D3A2A; --line-2:#2A4D39;
  --ink:#EAF5EE; --ink-2:#A6BFB0; --ink-3:#7F998A;
  --green:#34D399; --green-hover:#5EE0AE; --green-soft:rgba(52,211,153,.13); --glow:rgba(52,211,153,.22);
  --btn-ink:#03170E;
  --c2:#60B4FF; --c2-soft:rgba(96,180,255,.14);
  --c3:#FF8A8A; --c3-soft:rgba(255,138,138,.14);
  --c4:#FFD24D; --c4-soft:rgba(255,210,77,.13);
  --key:#FFD24D; --key-edge:#C9A02E; --key-bg:#0B3322;
  --warn:#E8B45A;
  --rule-line:rgba(96,180,255,.06); --margin-line:rgba(255,138,138,.14);
  --paper:#FFFFFF; --paper-2:#E8F0F6; --paper-rule:#CBE0F1; --paper-margin:#EFA5A5;
  --paper-ink:#10202B; --paper-ink-2:#55687A; --pen:#0B5CAD; --pen-red:#C8363B;
  --page-shadow:0 60px 90px -50px rgba(0,0,0,.85);
  /* the deep forest band and the footer: dark in both themes */
  --deep:#0B3322; --deep-2:#0E3B28; --deep-surface:rgba(234,245,238,.045); --deep-line:rgba(234,245,238,.12);
  --deep-ink:#EAF5EE; --deep-ink-2:#A9C8B6; --deep-ink-3:#80A18C; --deep-green:#5EE0AE; --deep-c2:#7CC2FF;
  --foot-bg:#0B3322; --foot-ink:#E6F1E9; --foot-ink-2:#A9C4B2; --foot-ink-3:#80A18C; --foot-line:rgba(230,241,233,.11); --foot-accent:#5EE0AE;
  --shadow:0 50px 90px -48px rgba(0,0,0,.9), 0 0 0 1px var(--green-soft);
  --nav-bg:color-mix(in srgb,var(--bg) 74%,transparent);
  --display:"Schibsted Grotesk","Helvetica Neue","Segoe UI",Arial,system-ui,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --hand:"Kalam","Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS",cursive;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F3F8F5; --bg-2:#E8F2EC; --surface:#FFFFFF; --surface-2:#EEF6F1;
  --line:#D3E4D9; --line-2:#BBD4C4;
  --ink:#0D1F16; --ink-2:#43594C; --ink-3:#5B7163;
  --green:#047857; --green-hover:#036449; --green-soft:rgba(4,120,87,.09); --glow:rgba(4,120,87,.16);
  --btn-ink:#FFFFFF;
  --c2:#0366C4; --c2-soft:rgba(3,102,196,.09);
  --c3:#C8363B; --c3-soft:rgba(200,54,59,.08);
  --c4:#9A6700; --c4-soft:rgba(154,103,0,.1);
  --warn:#9A5F00;
  --rule-line:rgba(3,102,196,.07); --margin-line:rgba(200,54,59,.15);
  --page-shadow:0 40px 70px -40px rgba(20,40,30,.4), 0 0 0 1px rgba(20,40,30,.08);
  --shadow:0 44px 80px -46px rgba(11,46,28,.45), 0 0 0 1px rgba(20,40,30,.1);
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.05;text-wrap:balance;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{max-width:1220px;margin-inline:auto;padding-inline:clamp(16px,4vw,36px)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sec{padding-block:clamp(76px,10vw,132px);position:relative}
.sec-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(34px,4.6vw,60px);font-weight:800;letter-spacing:-.03em}
.sec-head p{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:62ch}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ------------------------------------------------------------ keycaps */
kbd,.kcap{font-family:var(--mono);font-weight:600;font-size:13px;line-height:1;min-width:26px;display:inline-flex;align-items:center;justify-content:center;padding:6px 7px 5px;background:var(--key-bg);color:var(--key);border:1px solid var(--key-edge);border-bottom-width:3px;border-radius:6px;text-transform:uppercase}
.kcap{cursor:pointer}
@media (prefers-reduced-motion:no-preference){.kcap{transition:transform .08s ease,border-bottom-width .08s ease,box-shadow .15s ease}}
.kcap:hover{box-shadow:0 0 0 3px rgba(255,210,77,.16)}
.kcap:active,.kcap.is-pressed{transform:translateY(2px);border-bottom-width:1px}
kbd.sm{font-size:11.5px;min-width:22px;padding:4px 5px 3px;border-bottom-width:2px}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:16px;line-height:1.2;padding:14px 22px;border-radius:999px;text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.btn .ic{width:18px;height:18px}
.btn.primary{background:var(--green);color:var(--btn-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.small{font-size:14px;padding:9px 16px}
@media (prefers-reduced-motion:no-preference){.btn{transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}}
.btn.primary:hover{background:var(--green-hover);transform:translateY(-1px);box-shadow:0 12px 30px -12px var(--glow)}
.btn.ghost:hover{border-color:var(--green);transform:translateY(-1px)}
.btn .arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ------------------------------------------------------------ top strip + nav */
.review{background:var(--key-bg);color:#DCE6D6;font-size:13px;text-align:center;padding:7px 16px}
.review b{color:var(--key);font-weight:600}
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:26px;width:auto}
.logo-on-light{display:none}
:root[data-theme="light"] .logo-on-dark{display:none}
:root[data-theme="light"] .logo-on-light{display:block}
.nav-links{display:flex;align-items:center;gap:6px;margin-right:auto}
.nav-links > a,.nav-links > .mega-wrap > button{font-size:15px;color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:8px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-links > a:hover,.nav-links > .mega-wrap > button:hover,.nav-links > .mega-wrap > button[aria-expanded="true"]{color:var(--ink);background:var(--green-soft)}
.nav-links .caret{width:14px;height:14px;transition:transform .2s ease}
.nav-links button[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* Features: the word is a link to /features/, the arrow opens the menu (build-site.py features_word) */
.mega-head{display:inline-flex;align-items:center;border-radius:8px}
.mega-head > a{font-size:15px;color:var(--ink-2);text-decoration:none;padding:8px 2px 8px 12px;border-radius:8px 0 0 8px}
.mega-head > a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mega-head > button{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:36px;padding:0 8px 0 4px;background:none;border:0;border-radius:0 8px 8px 0;color:var(--ink-2);cursor:pointer}
.mega-head:hover,.mega-wrap:has(.mega.is-open) .mega-head{background:var(--green-soft)}
.mega-head:hover > a,.mega-head:hover > button,.mega-wrap:has(.mega.is-open) .mega-head > *{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line-2);color:var(--ink-2);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:13.5px}
.icon-btn:hover{color:var(--ink);border-color:var(--green)}
.icon-btn .ic{width:16px;height:16px}
.nav-toggle{display:none}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.mega{transition:opacity .2s ease,transform .2s ease,visibility .2s}}
.mega.is-open{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.mega-inner{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:36px;padding-block:28px 34px}
.mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.mega-item:hover{background:var(--green-soft)}
.mega-item .ic{color:var(--green);margin-top:2px}
.mega-item b{display:block;font-weight:600;font-size:15px}
.mega-item span{display:block;font-size:13px;color:var(--ink-3);line-height:1.4}
.mega-aside{border-left:1px solid var(--line);padding-left:28px;display:grid;gap:12px;align-content:start}
.mega-aside a{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:14.5px;color:var(--ink-2);padding:6px 0}
.mega-aside a:hover{color:var(--ink)}

/* ------------------------------------------------------------ hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,110px);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:
    linear-gradient(to right,transparent calc(9% - 4px),var(--margin-line) calc(9% - 4px),var(--margin-line) calc(9% - 3px),transparent calc(9% - 3px),transparent 9%,var(--margin-line) 9%,var(--margin-line) calc(9% + 1px),transparent calc(9% + 1px)),
    repeating-linear-gradient(to bottom,transparent 0 33px,var(--rule-line) 33px 34px);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 55% 35%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 90% 80% at 55% 35%,#000 35%,transparent 85%)}
.hero::after{content:"";position:absolute;z-index:-1;width:70vw;height:70vw;max-width:1100px;max-height:1100px;right:-18vw;top:-10vw;background:radial-gradient(circle,var(--glow),transparent 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero-copy{display:grid;gap:26px;align-content:start}
.hero h1{font-size:clamp(46px,6.2vw,94px);font-weight:900;letter-spacing:-.045em;line-height:.94}
.hero-sub{font-size:clamp(18px,1.7vw,21px);color:var(--ink-2);max-width:44ch;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--ink-3)}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta .ic{width:15px;height:15px;color:var(--green)}

.stage{position:relative}
.frame{position:relative;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;transform-style:preserve-3d;will-change:transform}
@media (prefers-reduced-motion:no-preference){.frame{transition:transform .35s cubic-bezier(.2,.7,.2,1)}}
.titlebar{display:flex;align-items:center;gap:10px;height:38px;padding:0 6px 0 12px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.titlebar img{width:16px;height:16px;border-radius:4px}
.titlebar .t-title{margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.winctl{display:flex}
.winctl span{width:40px;height:30px;display:grid;place-items:center;color:var(--ink-3);font-size:13px}
.screen{position:relative;aspect-ratio:16/10;background:#0B2E1C}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top left}
@media (prefers-reduced-motion:no-preference){.screen img,.gal-figure img{transition:opacity .16s ease}}
.is-fading{opacity:.15}

.overlay{position:absolute;left:14px;top:14px;width:min(360px,64%);background:rgba(6,10,7,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(155,196,122,.25);border-radius:14px;padding:14px;color:#ECF3E7;box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.overlay[hidden]{display:none!important}
.ov-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-family:var(--display);font-weight:700;font-size:17px}
.ov-list{display:grid;gap:2px}
.ov-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:6px 8px;color:#ECF3E7;font-size:14px;cursor:pointer}
.ov-item:hover{background:rgba(155,196,122,.14)}
.ov-item em{margin-left:auto;font-style:normal;font-size:11px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#9BC47A}
.ov-item.muted{color:#8E9C88}
.ov-item.muted em{color:#6F7D69}

.chip{position:absolute;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:10px 14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.7);font-size:13px;color:var(--ink-2);white-space:nowrap}
.chip b{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.chip .dot.warn{background:var(--warn);box-shadow:0 0 0 4px rgba(232,180,90,.16)}
.chip-a{left:-26px;top:22%}
.chip-b{right:-22px;top:56%}
.chip-c{left:12%;bottom:-24px}
@media (prefers-reduced-motion:no-preference){
  .chip-a{animation:bob 7s ease-in-out infinite}
  .chip-b{animation:bob 8s ease-in-out -2s infinite}
  .chip-c{animation:bob 9s ease-in-out -4s infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.demo-bar{margin-top:44px;display:grid;gap:12px}
.demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.demo-row .label{margin-right:6px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.live.on{color:var(--green)}
.live.on i{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
@media (prefers-reduced-motion:no-preference){.live.on i{animation:pulse 1.8s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.echo{display:inline-flex;align-items:center;gap:6px;min-height:30px;font-size:14px;color:var(--ink-2)}
.echo .sep{color:var(--ink-3)}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px 6px 7px;cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.pick:hover{border-color:var(--green);color:var(--ink)}
.demo-note{font-size:13.5px;color:var(--ink-3);min-height:1.4em}
.fig-note{font-size:12.5px;color:var(--ink-3);margin-top:40px}

/* ------------------------------------------------------------ truths strip */
.truths{border-block:1px solid var(--line);background:var(--bg-2)}
.truths ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.truths li{display:grid;gap:8px;padding:30px 26px;border-left:1px solid var(--line)}
.truths li:first-child{border-left:0}
.truths .ic{color:var(--green);width:24px;height:24px}
.truths b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.truths span{font-size:15px;color:var(--ink-2)}

/* ------------------------------------------------------------ spotlight surfaces */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--green-soft),transparent 55%)}
@media (prefers-reduced-motion:no-preference){.spot::before{transition:opacity .25s ease}.spot{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}}
.spot:hover::before{opacity:1}

/* ------------------------------------------------------------ menu map */
.menus{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 20px;display:grid;gap:16px;align-content:start}
.tile:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
.tile-head{display:flex;align-items:center;gap:12px}
.tile-head h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-right:auto}
.tile-head .ic{color:var(--green)}
.tile-list{display:grid;gap:7px}
.tile-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2)}
.peek{margin-left:auto;background:transparent;border:1px solid var(--line-2);color:var(--green);font-size:11.5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;cursor:pointer}
.peek:hover{border-color:var(--green);background:var(--green-soft)}
.tile.help-tile{background:linear-gradient(160deg,var(--green-soft),transparent 70%),var(--surface);border-color:var(--line-2)}
.tile.help-tile p{color:var(--ink-2);font-size:15px}
.tile.help-tile a{justify-self:start}
.plain-list li{padding-left:16px;position:relative}
.plain-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--line-2)}

/* ------------------------------------------------------------ gallery */
.gal{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3vw,48px);align-items:start}
.gal-tabs{display:grid;gap:8px;position:sticky;top:96px}
.gal-tab{display:grid;gap:6px;text-align:left;background:transparent;border:1px solid transparent;border-radius:16px;padding:16px 18px;cursor:pointer;color:var(--ink-2)}
.gal-tab:hover{background:var(--green-soft)}
.gal-tab .t{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink-2)}
.gal-tab .d,.gal-tab .k{display:none}
.gal-tab[aria-selected="true"]{background:var(--surface);border-color:var(--line-2)}
.gal-tab[aria-selected="true"] .t{color:var(--ink)}
.gal-tab[aria-selected="true"] .d{display:block;font-size:15px;color:var(--ink-2)}
.gal-tab[aria-selected="true"] .k{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.gal-figure{margin:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.gal-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}

/* ------------------------------------------------------------ import cards */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:grid;gap:14px;align-content:start}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card .ic-wrap{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.card h3{font-size:22px;font-weight:700;letter-spacing:-.015em}
.card p{color:var(--ink-2);font-size:15.5px}
.aside-note{margin-top:22px;font-size:14px;color:var(--ink-3);max-width:80ch}

/* ------------------------------------------------------------ portal band */
.band{background:var(--bg-2);border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.checks{display:grid;border-top:1px solid var(--line)}
.checks li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.checks .ic{color:var(--green);margin-top:3px}
.checks b{display:block;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.checks span{color:var(--ink-2);font-size:15.5px}

/* ------------------------------------------------------------ two screens */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}
.trio > div{padding:30px 28px;display:grid;gap:12px;align-content:start;border-left:1px solid var(--line)}
.trio > div:first-child{border-left:0}
.trio .ic{color:var(--green);width:26px;height:26px}
.trio h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
.trio p{color:var(--ink-2);font-size:15.5px}

/* ------------------------------------------------------------ plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 28px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:18px}
.plan:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.plan.featured{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 30px 70px -40px var(--glow)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-name{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em}
.tagp{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.price{display:grid;gap:4px}
.price .was{font-size:15px;color:var(--ink-3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.price .now{font-family:var(--display);font-weight:800;font-size:48px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.price .per{font-size:14px;color:var(--ink-3)}
.pay{font-family:var(--mono);font-size:13px;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.plan-note{color:var(--ink-2);font-size:15px}
.plan ul{display:grid;gap:10px;align-content:start}
.plan li{display:flex;gap:10px;font-size:15px;color:var(--ink-2)}
.plan li .ic{width:18px;height:18px;color:var(--green);margin-top:3px}
.plan .btn{width:100%}
.plans-foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--ink-3)}

/* ------------------------------------------------------------ trial + download */
.cta{border-radius:28px;border:1px solid var(--line-2);background:
  radial-gradient(120% 140% at 0% 0%,var(--green-soft),transparent 55%),
  var(--surface);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,60px);align-items:center}
.cta h2{font-size:clamp(36px,4.8vw,64px);font-weight:900;letter-spacing:-.035em}
.cta p{color:var(--ink-2);font-size:18px;max-width:52ch;margin-top:18px}
.dl{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:18px}
.dl-head{display:flex;align-items:center;gap:14px}
.dl-head img{width:48px;height:48px;border-radius:12px}
.dl-head b{display:block;font-family:var(--display);font-weight:700;font-size:20px}
.dl-head span{font-size:14px;color:var(--ink-3)}
.dl dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px}
.dl dt{color:var(--ink-3)}
.dl dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.dl .btn{width:100%}

/* ------------------------------------------------------------ help + support */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.duo .card{padding:32px}
.contact-rows{display:grid;gap:10px}
.contact-rows a{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:16px;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.contact-rows a:hover{border-color:var(--green)}
.contact-rows .ic{color:var(--green)}
.contact-rows small{margin-left:auto;color:var(--ink-3);font-size:13px}

/* ------------------------------------------------------------ footer */
.foot{border-top:1px solid var(--line);padding-block:56px 40px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-brand{display:grid;gap:14px;align-content:start}
.foot-brand img{height:26px;width:auto}
.foot-brand p{color:var(--ink-3);font-size:14px;max-width:34ch}
.foot h4{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.foot li{margin-bottom:9px}
.foot li a{text-decoration:none;color:var(--ink-2);font-size:15px}
.foot li a:hover{color:var(--ink)}
.address{font-style:normal;color:var(--ink-3);font-size:14px;line-height:1.55}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-3)}

/* ------------------------------------------------------------ revision 2: a smaller hero with room between */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(40px,6.5vw,110px)}
.hero-copy{gap:22px}
.hero h1{font-size:clamp(40px,4.7vw,72px);line-height:.98;letter-spacing:-.04em}
.hero-sub{font-size:clamp(16.5px,1.35vw,19px);max-width:42ch}
.stage{width:100%;max-width:640px;justify-self:end}
.chip{padding:8px 12px;font-size:12.5px}
.chip b{font-size:15px}
.chip-a{left:-18px}
.chip-b{right:-14px}
.demo-bar{margin-top:40px}
.scribble{display:flex;align-items:flex-end;gap:6px;font-family:var(--hand);font-size:19px;line-height:1.1;color:var(--c2);transform:rotate(-2deg);transform-origin:left bottom;margin-bottom:-2px}
.scribble b{font-weight:700;color:var(--c4)}
.scribble svg{width:40px;height:32px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------ colour roles: green leads, the others answer */
.sec-head .label{color:var(--c2)}
.truths li:nth-child(2) .ic,.checks .ic{color:var(--c2)}
.truths li:nth-child(3) .ic{color:var(--c4)}
.cards3 .card:nth-child(2) .ic-wrap,.duo .card:nth-child(2) .ic-wrap{background:var(--c2-soft);color:var(--c2)}
.cards3 .card:nth-child(3) .ic-wrap{background:var(--c4-soft);color:var(--c4)}
.trio > div:nth-child(2) .ic{color:var(--c2)}
.trio > div:nth-child(3) .ic{color:var(--c4)}
.mega-item:nth-child(3n+2) .ic{color:var(--c2)}
.mega-item:nth-child(3n) .ic{color:var(--c4)}
.tagp.c2{background:var(--c2-soft);color:var(--c2)}
.tagp.c4{background:var(--c4-soft);color:var(--c4)}
/* a total is ruled off twice, as in any account book */
.price .now{text-decoration:underline double var(--c2);text-decoration-thickness:2px;text-underline-offset:10px;text-decoration-skip-ink:none;margin-bottom:10px}

/* ------------------------------------------------------------ the pen mark under a headline */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg{position:absolute;left:-1%;bottom:-.2em;width:102%;height:.34em;overflow:visible;pointer-events:none}
.mark path{fill:none;stroke:var(--c2);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.mark.go path{animation:draw 1s cubic-bezier(.6,.1,.3,1) both}}
@keyframes draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}

/* ------------------------------------------------------------ ruled paper behind a section */
.ruled{isolation:isolate}
.ruled::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,transparent calc(6% - 4px),var(--margin-line) calc(6% - 4px),var(--margin-line) calc(6% - 3px),transparent calc(6% - 3px),transparent 6%,var(--margin-line) 6%,var(--margin-line) calc(6% + 1px),transparent calc(6% + 1px)),
    repeating-linear-gradient(to bottom,transparent 0 33px,var(--rule-line) 33px 34px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}

/* ------------------------------------------------------------ the cash book page */
.ledger-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,80px);align-items:center}
.page{position:relative;margin:0;background:var(--paper);color:var(--paper-ink);border-radius:4px 12px 12px 4px;padding:26px clamp(18px,3vw,30px) 20px clamp(54px,6vw,72px);box-shadow:var(--page-shadow),0 3px 0 -1px var(--paper-2),0 6px 0 -2px var(--paper-2);transform:rotate(-1.3deg)}
@media (prefers-reduced-motion:no-preference){.page{transition:transform .5s cubic-bezier(.2,.7,.2,1)}}
.page:hover{transform:rotate(-.3deg)}
.page::before{content:"";position:absolute;top:0;bottom:0;left:clamp(34px,4.2vw,50px);width:4px;border-inline:1px solid var(--paper-margin)}
.page-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding-bottom:10px}
.ph-title{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.hand{font-family:var(--hand);font-weight:400}
.ph-date{font-size:21px;color:var(--pen);line-height:1}
.ph-folio{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-ink-2)}
.ph-folio .hand{font-size:19px;letter-spacing:0;text-transform:none;color:var(--pen)}
.page-scroll{overflow-x:auto}
.cb{width:100%;min-width:480px;border-collapse:collapse}
.cb th,.cb td{height:42px;padding:0 12px 6px;border-bottom:1px solid var(--paper-rule);text-align:right;white-space:nowrap;vertical-align:bottom}
.cb tr > :first-child{text-align:left;padding-left:0;white-space:normal}
.cb tr > * + *{border-left:1px solid var(--paper-margin)}
.cb thead th{height:32px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-ink-2);border-bottom:2px solid var(--paper-rule)}
.cb tbody td,.cb tfoot th,.cb tfoot td{font-family:var(--hand);font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1;color:var(--pen)}
.cb tfoot td{border-top:1.5px solid var(--paper-ink-2)}
.cb .w{display:inline-block}
.cb .total{color:var(--pen-red);font-weight:700;border-bottom:3px double var(--pen-red);padding-bottom:2px}
.cb td:nth-child(2) .w{--c:1}
.cb td:nth-child(3) .w{--c:2}
.cb td:nth-child(4) .w{--c:3}
.page-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.page-foot figcaption{font-size:12.5px;color:var(--paper-ink-2)}
.audit{display:inline-flex;align-items:center;gap:2px;color:var(--pen-red);transform:rotate(-5deg)}
.audit svg{width:32px;height:28px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.audit .hand{font-size:22px;font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .page.writing .w{animation:write .5s steps(12,end) both;animation-delay:calc(var(--r,0) * .42s + var(--c,0) * .1s + .15s)}
  .page.writing .audit{animation:stamp .35s ease-out 3.3s both}
  .page.writing .audit path{animation:draw .45s ease-out 3.3s both}
}
@keyframes write{from{clip-path:inset(-40% 100% -40% 0)}to{clip-path:inset(-40% -10% -40% 0)}}
@keyframes stamp{from{opacity:0;transform:rotate(-5deg) scale(1.5)}to{opacity:1;transform:rotate(-5deg) scale(1)}}
.ledger-copy{display:grid;gap:24px;align-content:start}
.ledger-copy .sec-head{margin-bottom:0}
.keys{display:grid;border-top:1px solid var(--line)}
.keys li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start;padding:15px 0;border-bottom:1px solid var(--line)}
.keys .kk{display:flex;gap:5px;padding-top:2px}
.keys b{display:block;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.keys .kd{display:block;color:var(--ink-2);font-size:15px}

/* ------------------------------------------------------------ the menu map says what each menu is for */
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--g)}
.g-keep{--g:var(--green)}
.g-read{--g:var(--c2)}
.g-file{--g:var(--c4)}
.g-care{--g:var(--ink-3)}
.help-tile{--g:var(--green)}
.tile-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--g);background:color-mix(in srgb,var(--g) 15%,transparent)}
.tile-ic .ic{color:inherit;width:20px;height:20px}
.tile-desc{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tile:hover{border-color:color-mix(in srgb,var(--g,var(--green)) 50%,var(--line))}
.tile.spot::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--g,var(--green)) 14%,transparent),transparent 55%)}

/* ------------------------------------------------------------ cards arrive, the gallery turns its own pages */
@media (prefers-reduced-motion:no-preference){.rise-in{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.gal-tab{position:relative}
.gal-tab .bar{position:absolute;left:18px;right:18px;bottom:7px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;display:none}
.gal-tab .bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:var(--c2)}
.gal.auto .gal-tab[aria-selected="true"] .bar{display:block}
.gal.auto .gal-tab[aria-selected="true"] .bar i{animation:fill 6s linear both}
.gal:hover .bar i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

/* ------------------------------------------------------------ footer: dark green in every option, ruled off */
.foot{position:relative;isolation:isolate;color:var(--foot-ink);background:var(--foot-bg);border-top:0;padding-block:66px 36px}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-block:1px solid var(--foot-line)}
.foot::after{content:"";position:absolute;inset:6px 0 0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(255,255,255,.03) 33px 34px);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 80%);mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.foot h4{color:var(--foot-ink-3)}
.foot-brand p,.foot .address{color:var(--foot-ink-2)}
.foot li a{color:var(--foot-ink-2)}
.foot li a:hover{color:var(--foot-accent)}
.foot-base{border-top-color:var(--foot-line);color:var(--foot-ink-3)}
.foot .logo-on-dark{display:block!important}
.foot .logo-on-light{display:none!important}

/* ------------------------------------------------------------ revision 3: wider sections, and a deep forest band */
.wrap.wide{max-width:1440px}
.deep{position:relative;isolation:isolate;background:var(--deep);color:var(--deep-ink)}
.deep::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(234,245,238,.03) 33px 34px);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 45%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 90% 90% at 50% 45%,#000 35%,transparent 85%)}
.deep h2,.deep h3{color:var(--deep-ink)}
.deep p{color:var(--deep-ink-2)}
.deep .sec-head .label{color:var(--deep-c2)}
.deep .mark path{stroke:var(--deep-c2)}
.deep .btn.primary{background:var(--deep-green);color:#03170E}
.deep .btn.ghost{color:var(--deep-ink);border-color:var(--deep-line)}
.deep :focus-visible{outline-color:var(--deep-green)}

/* the portal, drawn as what travels between the two ends */
.portal-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:center}
.sync{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,150px);gap:16px 18px;align-items:center}
.node{grid-row:1 / span 4;align-self:stretch;display:grid;align-content:center;justify-items:center;gap:8px;text-align:center;padding:22px 14px;border-radius:18px;background:var(--deep-surface);border:1px solid var(--deep-line)}
.node.pc{grid-column:1}
.node.portal{grid-column:3}
.node img{width:40px;height:40px;border-radius:10px}
.node .ic{width:40px;height:40px;color:var(--deep-c2)}
.node b{font-family:var(--display);font-weight:700;font-size:17px;color:var(--deep-ink)}
.node span{font-size:12.5px;line-height:1.35;color:var(--deep-ink-3)}
.lane{grid-column:2;display:grid;gap:8px;padding-block:6px}
.lane-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;text-align:center}
.lane-label b{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--deep-ink)}
.lane-label span{font-size:13.5px;color:var(--deep-ink-2)}
.wire{position:relative;display:block;height:14px}
.wire::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:linear-gradient(to right,var(--deep-line),rgba(124,194,255,.5),var(--deep-line))}
.wire::after{content:"";position:absolute;top:2px;border-block:5px solid transparent}
.lane.in .wire::after{left:-2px;border-right:9px solid var(--deep-c2)}
.lane.out .wire::after{right:-2px;border-left:9px solid var(--deep-green)}
.wire i{position:absolute;top:3px;width:8px;height:8px;border-radius:50%}
.lane.in .wire i{left:calc(100% - 8px);background:var(--deep-c2);box-shadow:0 0 12px var(--deep-c2)}
.lane.out .wire i{left:0;background:var(--deep-green);box-shadow:0 0 12px var(--deep-green)}
@media (prefers-reduced-motion:no-preference){
  .lane.in .wire i{animation:travel-in 2.8s cubic-bezier(.5,0,.5,1) var(--d,0s) infinite}
  .lane.out .wire i{animation:travel-out 2.8s cubic-bezier(.5,0,.5,1) var(--d,0s) infinite}
}
@keyframes travel-in{0%{left:calc(100% - 8px);opacity:0}15%,85%{opacity:1}100%{left:0;opacity:0}}
@keyframes travel-out{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}

/* how it feels: one large card, two beside it */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bento > article{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.4vw,32px);display:grid;gap:12px;align-content:start;overflow:hidden}
.bento > article:hover{border-color:var(--line-2)}
.b-tabs{grid-column:span 7;grid-row:span 2}
.b-mouse,.b-keys{grid-column:span 5}
.bento > article > .ic{width:26px;height:26px;color:var(--green)}
.bento .b-mouse > .ic{color:var(--c2)}
.bento .b-keys > .ic{color:var(--c4)}
.bento h3{font-size:22px;font-weight:700;letter-spacing:-.015em}
.bento p{color:var(--ink-2);font-size:15.5px;max-width:54ch}
.mock{margin-top:8px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);overflow:hidden}
.mock-tabs{display:flex;align-items:flex-end;gap:4px;padding:10px 10px 0;background:var(--surface-2);border-bottom:1px solid var(--line-2);overflow:hidden}
.mock-tab{font-size:13px;padding:8px 14px;border-radius:9px 9px 0 0;color:var(--ink-3);white-space:nowrap}
.mock-tab.on{background:var(--bg-2);color:var(--ink);box-shadow:inset 0 2px 0 var(--green)}
@media (prefers-reduced-motion:no-preference){.mock-tab{transition:background-color .3s ease,color .3s ease}}
.mock-plus{padding:6px 10px 8px;font-family:var(--mono);color:var(--ink-3)}
.mock-body{display:grid;gap:10px;padding:18px 20px 22px}
.mock-title{font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:4px}
.mock-body i{display:block;height:9px;border-radius:5px;background:var(--line)}
.mock-menu{padding:6px}
.mrow{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink-2)}
.mrow.hot{background:var(--green-soft);color:var(--ink)}
.mrow .cur{position:absolute;right:24px;top:15px;width:18px;height:18px;fill:var(--ink);stroke:var(--bg);stroke-width:1.5}
.bigkeys{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;font-size:15px;color:var(--ink-3)}
.bigkeys kbd{font-size:22px;min-width:46px;padding:11px 12px 9px;border-bottom-width:4px;border-radius:9px}
.bigkeys .to{color:var(--c2);font-size:20px}
.bigkeys b{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}

/* ------------------------------------------------------------ page hero (every page but the homepage) */
.fhero{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,90px) clamp(56px,7vw,100px)}
.fhero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,100px);align-items:center}
.fhero-copy{display:grid;gap:24px;align-content:start}
.fhero h1{font-size:clamp(42px,5.4vw,82px);font-weight:900;letter-spacing:-.045em;line-height:.96}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:52ch}
.fhero-stats{display:flex;flex-wrap:wrap;gap:12px 32px;padding-top:4px}
.fhero-stats div{display:grid}
.fhero-stats b{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.fhero-stats span{font-size:13px;color:var(--ink-3)}
/* ------------------------------------------------------------ page components: areas, groups, shots, screen lists */
.area-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.area-keys{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.area-keys kbd:first-child{margin-left:4px}
.deep .area-keys{color:var(--deep-ink-3)}
.deep .tile-ic{--g:var(--deep-green)}
.split2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,76px);align-items:center}
.split2.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split2 .sec-head{margin-bottom:24px}
.shot{margin:0;border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.shot figcaption{padding:11px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.deep .shot{background:var(--deep-2);box-shadow:0 50px 90px -50px rgba(0,0,0,.8),0 0 0 1px var(--deep-line)}
.deep .shot figcaption{color:var(--deep-ink-3);border-color:var(--deep-line)}
.groups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.groups li{display:grid;gap:4px;align-content:start;padding:16px 0;border-top:1px solid var(--line)}
.groups b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.groups span{font-size:15.5px;color:var(--ink-2)}
.groups.one{grid-template-columns:1fr}
.groups.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.groups.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.deep .groups li{border-color:var(--deep-line)}
.deep .groups b{color:var(--deep-ink)}
.deep .groups span{color:var(--deep-ink-2)}
.screens{margin-top:22px;border-top:1px solid var(--line)}
.screens summary{display:flex;align-items:center;gap:10px;padding:14px 0;cursor:pointer;list-style:none;font-weight:600;font-size:15px;color:var(--green)}
.screens summary::-webkit-details-marker{display:none}
.screens summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:20px;line-height:1}
@media (prefers-reduced-motion:no-preference){.screens summary::after{transition:transform .2s ease}}
.screens[open] summary::after{transform:rotate(45deg)}
.chips{list-style:none;margin:0;padding:4px 0 10px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:13.5px;color:var(--ink-2)}
.chips.big li{padding:8px 14px;font-size:15px;font-weight:600;color:var(--ink)}
.deep .screens{border-color:var(--deep-line)}
.deep .screens summary{color:var(--deep-green)}
.deep .chips li{border-color:var(--deep-line);background:var(--deep-surface);color:var(--deep-ink-2)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;color:var(--green);text-decoration:none}
.more .ic{width:18px;height:18px}
@media (prefers-reduced-motion:no-preference){.more .ic{transition:transform .18s ease}}
.more:hover .ic{transform:translateX(3px)}
.deep .more{color:var(--deep-green)}
.sec-note{margin-top:14px;font-size:14px;color:var(--ink-3)}
.deep .sec-note{color:var(--deep-ink-3)}

/* billing: the order cycle */
.bill-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.bill-top .sec-head{margin-bottom:0}
.flow{display:grid;gap:14px;padding:22px;border:1px solid var(--deep-line);border-radius:18px;background:var(--deep-surface)}
.flow-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.flow-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-c2)}
.flow ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 30px}
.flow li{position:relative;padding:8px 13px;border:1px solid var(--deep-line);border-radius:10px;background:rgba(234,245,238,.05);font-size:14.5px;font-weight:600;color:var(--deep-ink)}
.flow li + li::before{content:"→";position:absolute;left:-22px;top:50%;transform:translateY(-50%);color:var(--deep-green)}
.flow figcaption{font-size:13px;color:var(--deep-ink-3)}
.bill-shot{margin-bottom:clamp(28px,4vw,48px)}

/* banking: the four kinds of file */
.files{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.files li{position:relative;display:grid;gap:6px;align-content:start;padding:82px 20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.files .ext{position:absolute;left:20px;top:18px;width:42px;height:50px;display:grid;place-items:end center;padding-bottom:7px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--bg);clip-path:polygon(0 0,68% 0,100% 24%,100% 100%,0 100%);border-radius:4px}
.files li:nth-child(1) .ext{background:var(--green)}
.files li:nth-child(2) .ext{background:var(--c2)}
.files li:nth-child(3) .ext{background:var(--c3)}
.files li:nth-child(4) .ext{background:var(--c4)}
.files b{font-family:var(--display);font-weight:700;font-size:18px}
.files .d{font-size:14.5px;color:var(--ink-2)}

/* reports: the Final menu as a register page */
.reg-page{max-width:520px}

/* payroll and export, side by side */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pair > article{display:grid;gap:14px;align-content:start;padding:clamp(24px,3vw,40px);background:var(--surface);border:1px solid var(--line);border-radius:24px}
.pair h2{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.025em}
.pair.one{grid-template-columns:minmax(0,1fr)}
.pair .lead{font-size:17px}

/* the things not on a menu */
.claims{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.claims li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;padding:20px 0;border-top:1px solid var(--line)}
.claims .ic{grid-row:span 2;width:24px;height:24px;margin-top:2px;color:var(--c2)}
.claims b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.claims span{font-size:15px;color:var(--ink-2)}
.nav-links .is-here{color:var(--ink)}

/* ------------------------------------------------------------ Windows and Mac marks */
.os{width:18px;height:18px;flex:none;fill:currentColor;stroke:none;vertical-align:middle}
.os-pair{display:inline-flex;align-items:center;gap:6px}
.hero-meta .os{width:15px;height:15px;color:var(--ink-2)}
.btn .os{width:17px;height:17px}
.licence-shot{margin-top:30px}

/* the home page's plans lead on to the Pricing page (Arpan, 16 September 2026) */
.plans-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-top:30px;text-align:center}
.plans-more span{font-size:14.5px;color:var(--ink-3)}

/* a feature in testing: "Coming in an update" (Arpan, 16 September 2026) */
.soon{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--c2-soft);color:var(--c2);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.03em;line-height:1.5;white-space:nowrap;vertical-align:2px}
.soon-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:14px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.fhero .soon-note{margin:0 0 14px}
.soon-note.after-files{margin:-6px 0 26px}
.mega-item .soon{display:table;margin:3px 0 4px;font-size:10.5px;color:var(--c2)}
.imp3 a:has(.soon){grid-template-rows:auto auto auto 1fr auto}
.imp3 h3 + .soon{justify-self:start;margin-top:-4px}
.groups b + .soon{display:table;margin:4px 0 2px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .menus{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav-links,.nav-actions .hide-sm{display:none}
  .nav-toggle{display:inline-flex}
  .nav.is-open .nav-links{display:grid;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px clamp(16px,4vw,36px) 20px;gap:2px}
  .nav.is-open .nav-links > a,.nav.is-open .nav-links > .mega-wrap > button{padding:12px 8px;font-size:17px;width:100%;justify-content:flex-start}
  .nav.is-open .mega-head{display:flex;width:100%}
  .nav.is-open .mega-head > a{flex:1;padding:12px 8px;font-size:17px}
  .nav.is-open .mega-head > button{min-width:52px;min-height:46px;padding:0;border-left:1px solid var(--line)}
  .mega{position:static;box-shadow:none;border:0;display:none}
  .mega.is-open{display:block}
  .mega-inner{grid-template-columns:1fr;padding-block:8px 12px}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega-aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
  .hero-grid,.split,.gal,.cta{grid-template-columns:1fr}
  .gal-tabs{position:static}
  .truths ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .truths li:nth-child(3){border-left:0}
  .truths li:nth-child(n+3){border-top:1px solid var(--line)}
  .plans,.cards3,.trio{grid-template-columns:1fr}
  .trio > div{border-left:0;border-top:1px solid var(--line)}
  .trio > div:first-child{border-top:0}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .menus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:1fr}
  .chip{position:static;animation:none!important}
  .chips-mobile{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
}
@media (min-width:761px){.chips-mobile{display:contents}}
@media (max-width:520px){
  .menus,.truths ul,.mega-grid,.foot-grid{grid-template-columns:1fr}
  .truths li{border-left:0!important;border-top:1px solid var(--line)}
  .truths li:first-child{border-top:0}
  .hero h1{font-size:44px}
  .nav-actions .btn{display:none}
}
@media (max-width:980px){
  .stage{justify-self:stretch;max-width:none}
  /* minmax(0,…), not 1fr: a bare 1fr column grows to the cash book's widest line and pushed
     the whole phone page sideways (Arpan, 15 September 2026). */
  .ledger-grid{grid-template-columns:minmax(0,1fr)}
  .page{transform:rotate(-.6deg)}
}
@media (max-width:520px){
  .hero h1{font-size:38px}
  .page{transform:none;padding-left:46px}
  .page::before{left:30px}
  /* The whole cash book fits a phone: every row and column stays, the pen writes a little
     smaller, and the column headings may break onto two lines. */
  .cb{min-width:0}
  .cb th,.cb td{height:38px;padding:0 6px 5px}
  .cb thead th{height:auto;padding-bottom:6px;font-size:10px;letter-spacing:.04em;white-space:normal}
  .cb tbody td,.cb tfoot th,.cb tfoot td{font-size:15px}
  .page-foot{flex-wrap:wrap}
  .mark{display:inline;white-space:normal;text-decoration:underline 3px var(--c2);text-underline-offset:.16em}
  .mark svg{display:none}
  .keys li{grid-template-columns:1fr;gap:8px}
  .foot-base{margin-bottom:60px}
}
@media (max-width:400px){
  /* The smallest phones (360 px): a narrower red margin gives the four columns their room. */
  .page{padding-left:36px;padding-right:12px}
  .page::before{left:22px}
  .cb th,.cb td{padding:0 4px 5px}
  .cb tbody td,.cb tfoot th,.cb tfoot td{font-size:14px}
  .cb thead th{font-size:9.5px}
}
@media (max-width:980px){
  .portal-grid{grid-template-columns:1fr}
  .b-tabs,.b-mouse,.b-keys{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:760px){
  .sync{grid-template-columns:1fr 1fr}
  .node{grid-row:1}
  .node.pc{grid-column:1}
  .node.portal{grid-column:2}
  .lane{grid-column:1 / -1}
}
@media (max-width:980px){
  .fhero-grid,.split2,.split2.rev,.bill-top,.pair{grid-template-columns:1fr}
  .groups.four,.files{grid-template-columns:repeat(2,minmax(0,1fr))}
  .groups.three,.claims{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reg-page{max-width:none}
}
@media (max-width:640px){
  .groups,.groups.three,.groups.four,.files,.claims{grid-template-columns:1fr}
  .flow-row{grid-template-columns:1fr;gap:8px}
}

/* ------------------------------------------------------------ support, two ways: WhatsApp and inside the software */
.ways{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,2vw,24px);align-items:stretch}
.way{display:grid;grid-template-rows:auto 1fr;gap:28px;min-width:0;padding:clamp(22px,2.6vw,34px);background:var(--surface);border:1px solid var(--line);border-radius:24px}
.way-head{display:grid;gap:16px;align-content:start}
.way-title{display:flex;align-items:center;gap:12px}
.way-title .ic-wrap{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.way:nth-child(2) .way-title .ic-wrap{background:var(--c2-soft);color:var(--c2)}
.way-title h3{font-size:clamp(22px,2vw,26px);font-weight:800;letter-spacing:-.02em}
.way-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:way}
.way-steps li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:baseline;font-size:15.5px;line-height:1.55;color:var(--ink-2);counter-increment:way}
.way-steps li::before{content:counter(way);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--c3)}
.way-steps b{font-weight:600;color:var(--ink)}
.way-note{font-size:13.5px;color:var(--ink-3)}
.way-visual{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0}
.way-visual > *{min-width:0}
.way:first-child .way-visual{align-content:center}

/* a drawing of the WhatsApp chat, in WhatsApp's own light colours in both themes */
.wa{--wa-bg:#EFEAE2;--wa-head:#008069;--wa-in:#FFFFFF;--wa-out:#D9FDD3;--wa-ink:#111B21;--wa-ink-2:#667781;--wa-tick:#53BDEB;
  position:relative;justify-self:center;width:100%;max-width:320px;margin:0;padding:9px;border-radius:40px;background:#0A1410;box-shadow:var(--page-shadow),inset 0 0 0 1px rgba(255,255,255,.1)}
.wa-screen{display:grid;grid-template-rows:auto 1fr auto;min-height:440px;border-radius:32px;overflow:hidden;background:var(--wa-bg);color:var(--wa-ink);font-family:var(--body)}
.wa-head{display:flex;align-items:center;gap:10px;padding:18px 14px 11px;background:var(--wa-head);color:#fff}
.wa-head img{width:36px;height:36px;border-radius:50%;background:#fff;object-fit:cover}
.wa-head b{display:block;font-weight:600;font-size:15px;line-height:1.25}
.wa-head span{font-size:12px;opacity:.85}
.wa-body{display:grid;align-content:start;gap:7px;padding:12px 11px;background-image:radial-gradient(rgba(17,27,33,.06) 1px,transparent 1.3px);background-size:13px 13px}
.wa-day{justify-self:center;margin-bottom:4px;padding:3px 10px;border-radius:8px;background:#fff;font-size:11.5px;color:var(--wa-ink-2);box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-msg{position:relative;max-width:84%;margin:0;padding:6px 9px 17px;border-radius:9px;font-size:14px;line-height:1.4;color:var(--wa-ink);box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-msg.in{justify-self:start;background:var(--wa-in);border-top-left-radius:2px}
.wa-msg.out{justify-self:end;background:var(--wa-out);border-top-right-radius:2px}
.wa-msg.word{padding:7px 58px 9px 12px;font-size:18px;font-weight:600}
.wa-msg.word time{bottom:9px}
.wa-msg time{position:absolute;right:8px;bottom:3px;font-size:10.5px;color:var(--wa-ink-2)}
.wa-msg.out time::after{content:"✓✓";margin-left:3px;letter-spacing:-.2em;color:var(--wa-tick)}
.wa-input{display:flex;align-items:center;gap:8px;padding:8px 10px 14px}
.wa-input span{flex:1;padding:9px 14px;border-radius:999px;background:#fff;font-size:14px;color:var(--wa-ink-2)}
.wa-input i{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--wa-head);color:#fff}
.wa-input .ic{width:18px;height:18px}
.wa-scribble{position:absolute;left:-8px;top:118px;transform:rotate(-8deg);font-family:var(--hand);font-weight:700;font-size:19px;line-height:1;color:var(--c2)}
@media (prefers-reduced-motion:no-preference){
  .wa.play .wa-msg{animation:wa-in .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--m,0) * .9s + .2s)}
}
@keyframes wa-in{from{opacity:.001;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* the software: two real screens at half width, one at a time */
.sw-switch{justify-self:center;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:16px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2)}
.sw-switch button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer}
.sw-switch button:hover{color:var(--ink)}
.sw-switch button[aria-selected="true"]{background:var(--green);color:var(--btn-ink)}
.sw-shot{justify-self:center;width:100%;max-width:620px}
.sw-shot img{aspect-ratio:auto;height:auto;object-fit:fill}
@media (max-width:980px){.ways{grid-template-columns:1fr}}
@media (max-width:640px){.wa-scribble{display:none}}

/* ------------------------------------------------------------ How it feels: drawn screens, with the demo company's own figures */
.mock-tab .k{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.mock-panes{display:grid}
.mock-panes > .mock-pane{grid-area:1 / 1}
.mock-pane{display:grid;gap:10px;align-content:start;padding:16px 18px 20px}
.mock-pane.off{visibility:hidden;opacity:0}
@media (prefers-reduced-motion:no-preference){.mock-pane{transition:opacity .25s ease,visibility .25s}}
.mock-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.mock-head small{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink-3)}
.mock-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mock-stats div{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:0}
.mock-stats span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mock-stats b{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.mock-stats b.ok{color:var(--green)}
.mock-rows{display:grid;border-top:1px solid var(--line)}
.mock-rows div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.mock-rows b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.mock-rows .total{font-weight:600;color:var(--ink)}
.mock-rows .total b{font-weight:700;border-bottom:3px double var(--c2)}
.mock-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mock-tiles span{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13.5px;color:var(--ink-2)}

.rc{margin-top:8px;padding:12px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-2)}
.rc-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--green-soft);font-size:13.5px;color:var(--ink)}
.rc-row .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rc-row .amt{justify-self:end}
.rc-row .st{padding:1px 8px;border-radius:999px;background:var(--surface);color:var(--green);font-size:11.5px}
.rc-menu{width:min(88%,310px);margin:6px 0 0 12%;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface);box-shadow:0 26px 50px -24px rgba(0,0,0,.6)}
.rc-menu-head{padding:6px 12px;background:var(--deep);color:var(--deep-ink);font-family:var(--mono);font-size:12px;font-weight:600}
.rc-item{position:relative;display:flex;justify-content:space-between;gap:12px;padding:5px 12px;font-size:13px;color:var(--ink-2)}
.rc-item .rk{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.rc-item.hot{background:var(--deep);color:var(--deep-ink)}
.rc-item.hot .rk{color:var(--deep-ink)}
.rc-cur{position:absolute;left:62%;top:9px;width:18px;height:18px;fill:var(--ink);stroke:var(--bg);stroke-width:1.5;pointer-events:none}
.rc-item.hot .rc-cur{fill:#fff;stroke:#0B3322}
@media (prefers-reduced-motion:no-preference){.rc-item{transition:background-color .15s ease,color .15s ease}}
@media (max-width:520px){.mock-stats,.mock-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:981px){
  .bento .b-tabs{grid-column:1 / span 7;grid-row:1}
  .bento .b-keys{grid-column:1 / span 7;grid-row:2}
  .bento .b-mouse{grid-column:8 / span 5;grid-row:1 / span 2}
}

/* ------------------------------------------------------------ the theme switch, pointed out until a visitor has used it (live site only) */
.has-theme-hint{position:relative}
.theme-hint{position:absolute;top:calc(100% + 12px);left:0;z-index:60;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);opacity:0;transform:translateY(-6px);pointer-events:none}
.theme-hint::before{content:"";position:absolute;top:-7px;left:var(--hint-arrow,24px);width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);transform:rotate(45deg)}
.theme-hint.show{opacity:1;transform:none;pointer-events:auto}
.theme-hint-x{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--ink-3);font-size:17px;line-height:1;cursor:pointer}
.theme-hint-x:hover{background:var(--green-soft);color:var(--ink)}
.icon-btn.hinting{border-color:var(--green);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .theme-hint{transition:opacity .35s ease,transform .35s ease}
  .icon-btn.hinting{animation:hint-pulse 1.8s ease-out 4}
}
@keyframes hint-pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}