@font-face {
font-family: 'Bricolage Grotesque Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url(/assets/fonts/bricolage-grotesque-latin-ext-wght-normal.e808f16b56.woff2) 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;
}
@font-face {
font-family: 'Bricolage Grotesque Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url(/assets/fonts/bricolage-grotesque-latin-wght-normal.a97804dc9f.woff2) 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;
}
@font-face {
font-family: 'Figtree Variable';
font-style: normal;
font-display: swap;
font-weight: 300 900;
src: url(/assets/fonts/figtree-latin-ext-wght-normal.bf7828e2c2.woff2) 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;
}
@font-face {
font-family: 'Figtree Variable';
font-style: normal;
font-display: swap;
font-weight: 300 900;
src: url(/assets/fonts/figtree-latin-wght-normal.4ba7d3d096.woff2) 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;
}
@font-face {
font-family: 'Figtree Fallback';
src:
local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
size-adjust: 99.86%;
ascent-override: 95.14%;
descent-override: 25.04%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Bricolage Fallback';
src:
local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'),
local('Helvetica Bold');
font-weight: 100 900;
size-adjust: 101.83%;
ascent-override: 91.33%;
descent-override: 26.51%;
line-gap-override: 0%;
}
:root {
color-scheme: light;
--canvas: #f2f4ee;
--surface: #ffffff;
--soft: #f7f9f4;
--text: #102219;
--muted: #54655b;
--link: #1f533d;
--dot: #4e7a1c;
--focus: #3d6b1c;
--border: #e1e7de;
--line: #d3dccf;
--hover: #e8ede3;
--card-border: transparent;
--accent: #c6ef6a;
--accent-hover: #b8e553;
--on-accent: #12301f;
--accent-shadow: 0 10px 24px rgb(120 170 30 / 0.28);
--icon-bg: #e7f3d6;
--icon-text: #2f5a1a;
--deep: #17402f;
--deep-text: #f3f8ef;
--deep-muted: #d3e3d8;
--stage: #17402f;
--stage-bg: radial-gradient(120% 130% at 100% 0%, #2b6a47 0%, #17402f 48%, #123321 100%);
--stage-glow: rgb(198 239 106 / 0.16);
--stage-text: #f3f8ef;
--stage-muted: #d3e3d8;
--stage-glass: rgb(255 255 255 / 0.1);
--stage-glass-border: rgb(255 255 255 / 0.18);
--header-bg: rgb(242 244 238 / 0.82);
--header-border: rgb(16 34 25 / 0.07);
--card-shadow: 0 1px 2px rgb(16 34 25 / 0.05), 0 12px 32px rgb(16 34 25 / 0.06);
--shot-shadow: 0 40px 90px rgb(8 28 18 / 0.3), 0 10px 24px rgb(8 28 18 / 0.14);
--paper-shadow: 0 34px 80px rgb(16 34 25 / 0.18), 0 6px 16px rgb(16 34 25 / 0.08);
--bezel: #0e1a14;
--shot-bg: rgb(255 255 255 / 0.55);
--shot-border: rgb(16 34 25 / 0.06);
--font-display: 'Bricolage Grotesque Variable', 'Bricolage Fallback', system-ui, sans-serif;
--font-text: 'Figtree Variable', 'Figtree Fallback', system-ui, sans-serif;
--max: 1240px;
--gutter: 16px;
--inset: 8px;
--radius-stage: 28px;
--radius-card: 24px;
--header-height: 64px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--canvas: #0b1410;
--surface: #121e18;
--soft: #16241d;
--text: #edf5ee;
--muted: #a8baae;
--link: #c6ef6a;
--dot: #c6ef6a;
--focus: #c6ef6a;
--border: #1f2f27;
--line: #2d4036;
--hover: #1a2a21;
--card-border: #1f2f27;
--accent-shadow: none;
--icon-bg: #22381a;
--icon-text: #cdeca0;
--deep: #163a29;
--stage: #12301f;
--stage-bg: radial-gradient(120% 130% at 100% 0%, #24573c 0%, #163a29 46%, #0f281c 100%);
--stage-glow: rgb(198 239 106 / 0.1);
--header-bg: rgb(11 20 16 / 0.82);
--header-border: rgb(255 255 255 / 0.06);
--card-shadow: none;
--shot-shadow: 0 40px 90px rgb(0 0 0 / 0.5), 0 10px 24px rgb(0 0 0 / 0.3);
--paper-shadow: 0 34px 80px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.06);
--bezel: #050b08;
--shot-bg: rgb(255 255 255 / 0.05);
--shot-border: rgb(255 255 255 / 0.09);
}
:root:not([data-theme="light"]) .theme-toggle .icon-moon {
display: none;
}
:root:not([data-theme="light"]) .theme-toggle .icon-sun {
display: block;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--canvas: #0b1410;
--surface: #121e18;
--soft: #16241d;
--text: #edf5ee;
--muted: #a8baae;
--link: #c6ef6a;
--dot: #c6ef6a;
--focus: #c6ef6a;
--border: #1f2f27;
--line: #2d4036;
--hover: #1a2a21;
--card-border: #1f2f27;
--accent-shadow: none;
--icon-bg: #22381a;
--icon-text: #cdeca0;
--deep: #163a29;
--stage: #12301f;
--stage-bg: radial-gradient(120% 130% at 100% 0%, #24573c 0%, #163a29 46%, #0f281c 100%);
--stage-glow: rgb(198 239 106 / 0.1);
--header-bg: rgb(11 20 16 / 0.82);
--header-border: rgb(255 255 255 / 0.06);
--card-shadow: none;
--shot-shadow: 0 40px 90px rgb(0 0 0 / 0.5), 0 10px 24px rgb(0 0 0 / 0.3);
--paper-shadow: 0 34px 80px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.06);
--bezel: #050b08;
--shot-bg: rgb(255 255 255 / 0.05);
--shot-border: rgb(255 255 255 / 0.09);
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
display: block;
}
@media (min-width: 640px) {
:root {
--gutter: 32px;
--inset: 12px;
--radius-stage: 36px;
--header-height: 72px;
}
}
@media (min-width: 1024px) {
:root {
--gutter: 40px;
--inset: 16px;
--radius-stage: 40px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background: var(--canvas);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 16px);
}
body {
margin: 0;
background: var(--canvas);
color: var(--text);
font-family: var(--font-text);
font-size: 1.0625rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
h1,
h2,
h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
text-wrap: balance;
}
p,
ul,
ol,
figure,
dl,
dd {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
a {
color: var(--link);
text-underline-offset: 0.18em;
}
strong {
font-weight: 700;
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
main:focus {
outline: none;
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.wrap {
width: min(var(--max), 100% - 2 * var(--gutter));
margin-inline: auto;
}
.dot {
color: var(--dot);
}
.icon {
flex-shrink: 0;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: 99px;
font: 650 0.98rem/1.2 var(--font-text);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
transform 0.15s ease;
}
.button .icon {
transition: transform 0.15s ease;
}
.button:hover .icon-arrow {
transform: translateX(3px);
}
.button-accent {
background: var(--accent);
color: var(--on-accent);
box-shadow: var(--accent-shadow);
}
.button-accent:hover {
background: var(--accent-hover);
}
.button-glass {
border-color: var(--stage-glass-border);
background: var(--stage-glass);
color: var(--stage-text);
}
.button-glass:hover {
background: rgb(255 255 255 / 0.17);
}
.button-dark {
background: #12301f;
color: #f3f8ef;
}
.button-dark:hover {
background: #1f533d;
}
.button-lg {
min-height: 56px;
padding: 0 28px;
font-size: 1.05rem;
}
.button-sm {
min-height: 40px;
padding: 0 16px;
font-size: 0.92rem;
}
.skip {
position: absolute;
top: -80px;
left: 16px;
z-index: 100;
padding: 12px 20px;
border-radius: 99px;
background: var(--accent);
color: var(--on-accent);
font-weight: 700;
text-decoration: none;
}
.skip:focus {
top: 12px;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--header-border);
background: var(--header-bg);
-webkit-backdrop-filter: saturate(1.5) blur(16px);
backdrop-filter: saturate(1.5) blur(16px);
}
.header-inner {
position: relative;
display: flex;
align-items: center;
gap: 12px;
height: var(--header-height);
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 12px;
color: var(--text);
text-decoration: none;
}
.brand .mark {
width: 34px;
height: 34px;
}
.wordmark {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
}
.site-nav {
margin-left: auto;
}
.site-nav ul {
display: flex;
gap: 2px;
}
.site-nav a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 13px;
border-radius: 99px;
color: var(--muted);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
}
.site-nav a:hover {
background: var(--hover);
color: var(--text);
}
.nav-cta {
display: none;
}
.header-tools {
display: flex;
align-items: center;
gap: 8px;
margin-left: 8px;
}
.tool {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 99px;
background: var(--surface);
color: var(--text);
font: 700 0.82rem/1 var(--font-text);
letter-spacing: 0.05em;
text-decoration: none;
cursor: pointer;
}
.tool:hover {
background: var(--hover);
}
.theme-toggle,
.menu-toggle {
width: 40px;
padding: 0;
}
.theme-toggle .icon-sun,
.menu-toggle .icon-close,
.menu-toggle[aria-expanded='true'] .icon-menu {
display: none;
}
.menu-toggle[aria-expanded='true'] .icon-close {
display: block;
}
@media (max-width: 1099px) {
.site-nav {
display: none;
}
.site-nav[data-open] {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: 0;
display: block;
padding: 10px;
border: 1px solid var(--border);
border-radius: 24px;
background: var(--surface);
box-shadow: 0 24px 60px rgb(8 28 18 / 0.2);
}
.site-nav[data-open] ul {
flex-direction: column;
}
.site-nav[data-open] a {
display: flex;
min-height: 48px;
padding: 0 16px;
color: var(--text);
font-size: 1.05rem;
}
.site-nav[data-open] .nav-cta {
display: flex;
margin-top: 8px;
}
.site-nav[data-open] .nav-cta a {
justify-content: center;
width: 100%;
background: var(--accent);
color: var(--on-accent);
}
.header-tools {
margin-left: auto;
}
}
@media (min-width: 1100px) {
.menu-toggle {
display: none;
}
}
@media (max-width: 559px) {
.header-cta {
display: none;
}
}
@media (max-width: 399px) {
.wordmark {
font-size: 1.3rem;
}
.brand .mark {
width: 30px;
height: 30px;
}
.header-tools {
gap: 6px;
}
.tool {
min-width: 36px;
height: 36px;
padding: 0 10px;
}
.theme-toggle,
.menu-toggle {
width: 36px;
padding: 0;
}
}
.section {
padding-top: clamp(88px, 11vw, 160px);
}
.section-head {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: end;
gap: 20px 72px;
margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head.single {
grid-template-columns: minmax(0, 1fr);
max-width: 760px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--muted);
font-size: 0.8rem;
font-weight: 750;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}
.eyebrow::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--dot);
}
h2 {
font-size: clamp(2.15rem, 1.25rem + 3.2vw, 4.1rem);
line-height: 1.02;
letter-spacing: -0.045em;
}
main {
overflow-x: clip;
}
.section-head.single h2 {
font-size: clamp(2.05rem, 1.25rem + 2.5vw, 3.4rem);
}
h3 {
font-size: 1.28rem;
line-height: 1.2;
letter-spacing: -0.025em;
}
.section-intro {
max-width: 54ch;
color: var(--muted);
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
line-height: 1.55;
}
@media (max-width: 899px) {
.section-head {
grid-template-columns: minmax(0, 1fr);
}
}
.icon-tile {
display: grid;
flex-shrink: 0;
width: 46px;
height: 46px;
place-items: center;
border-radius: 15px;
background: var(--icon-bg);
color: var(--icon-text);
}
.card {
border: 1px solid var(--card-border);
border-radius: var(--radius-card);
background: var(--surface);
box-shadow: var(--card-shadow);
}
.point {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px 16px;
}
.point .icon-tile {
grid-row: 1 / span 2;
align-self: start;
}
.point h3 {
padding-top: 11px;
font-size: 1.12rem;
}
.point p {
color: var(--muted);
font-size: 1rem;
}
.shot {
overflow: hidden;
padding: clamp(5px, 0.7vw, 10px);
border: 1px solid var(--shot-border);
border-radius: clamp(16px, 2vw, 28px);
background: var(--shot-bg);
box-shadow: var(--shot-shadow);
}
.shot img {
width: 100%;
border-radius: clamp(11px, 1.4vw, 19px);
}
.stage .shot {
border-color: var(--stage-glass-border);
background: var(--stage-glass);
}
.shot-fade img {
-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.phone {
padding: 3.2%;
border: 1px solid rgb(255 255 255 / 0.12);
border-radius: clamp(26px, 13%, 48px) / clamp(26px, 6%, 48px);
background: var(--bezel);
box-shadow: var(--shot-shadow);
}
.phone img {
width: 100%;
border-radius: clamp(20px, 11%, 40px) / clamp(20px, 5.2%, 40px);
}
.hero {
--overhang: clamp(56px, 13vw, 210px);
padding: 8px var(--inset) 0;
}
.stage {
--focus: #c6ef6a;
--dot: #c6ef6a;
--link: #c6ef6a;
border-radius: var(--radius-stage);
background: var(--stage);
background-image: var(--stage-bg);
color: var(--stage-text);
}
.hero-stage {
position: relative;
display: flow-root;
padding-top: clamp(44px, 6vw, 88px);
}
.hero-stage::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 70%;
height: 45%;
border-radius: 0 0 var(--radius-stage) 0;
background: radial-gradient(70% 80% at 85% 100%, var(--stage-glow), transparent 72%);
pointer-events: none;
}
.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 12px;
border: 1px solid var(--stage-glass-border);
border-radius: 99px;
background: var(--stage-glass);
color: var(--stage-text);
font-size: 0.9rem;
font-weight: 650;
line-height: 1.3;
}
.badge-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #c6ef6a;
box-shadow: 0 0 0 4px rgb(198 239 106 / 0.22);
}
.hero h1 {
margin-top: 26px;
font-size: clamp(2.65rem, 1.2rem + 5.1vw, 6.1rem);
line-height: 0.98;
letter-spacing: -0.052em;
}
.hero-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 28px 56px;
margin-top: clamp(24px, 3vw, 40px);
}
.lead {
max-width: 50ch;
color: var(--stage-muted);
font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
line-height: 1.55;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero-note {
margin-top: 14px;
color: var(--stage-muted);
font-size: 0.92rem;
font-weight: 600;
}
.hero-visual {
position: relative;
z-index: 2;
margin-top: clamp(40px, 6vw, 80px);
margin-bottom: calc(-1 * var(--overhang));
}
.hero-shot img {
aspect-ratio: 1440 / 900;
}
.hero-phone {
position: absolute;
right: -1.5%;
bottom: -7%;
width: 19%;
}
@media (max-width: 899px) {
.hero-row {
grid-template-columns: minmax(0, 1fr);
}
.hero-phone {
display: none;
}
}
@media (max-width: 639px) {
.hero {
--overhang: 132px;
}
.stage .hero-shot {
width: min(82%, 330px);
margin-inline: auto;
padding: 2.6%;
border: 1px solid rgb(255 255 255 / 0.12);
border-radius: 40px;
background: var(--bezel);
}
.hero-shot img {
aspect-ratio: 390 / 844;
border-radius: 32px;
}
.hero-actions .button {
flex: 1 1 100%;
}
}
.facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 30px;
margin-top: calc(var(--overhang) + clamp(40px, 7vw, 110px));
}
.facts li {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--muted);
font-size: 0.97rem;
font-weight: 650;
}
.facts .icon {
color: var(--icon-text);
}
.bento {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.feature {
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(24px, 2.4vw, 32px);
}
.feature h3 {
margin-top: 8px;
}
.feature p {
color: var(--muted);
font-size: 1rem;
}
.feature-documents {
position: relative;
grid-column: span 2;
overflow: hidden;
border-color: transparent;
background: var(--deep);
color: var(--deep-text);
}
.feature-documents::after {
content: '';
position: absolute;
right: -90px;
bottom: -150px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgb(198 239 106 / 0.2), transparent 66%);
pointer-events: none;
}
.feature-documents h3 {
margin-top: 0;
font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
letter-spacing: -0.04em;
}
.feature-documents p {
max-width: 52ch;
color: var(--deep-muted);
font-size: 1.05rem;
}
.feature-documents .icon-tile {
background: #c6ef6a;
color: #12301f;
}
.doc-types {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
padding-top: 18px;
}
.doc-types li {
padding: 7px 14px;
border: 1px solid rgb(198 239 106 / 0.32);
border-radius: 99px;
color: #c6ef6a;
font-size: 0.92rem;
font-weight: 650;
}
.feature-head {
display: flex;
align-items: center;
gap: 16px;
}
@media (max-width: 999px) {
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 639px) {
.bento {
grid-template-columns: minmax(0, 1fr);
}
.feature-documents {
grid-column: auto;
}
}
.invoice-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(40px, 6vw, 96px);
}
.paper-stack {
position: relative;
max-width: 560px;
margin-inline: auto;
}
.paper-stack::before {
content: '';
position: absolute;
inset: 2% 0 -2% 3%;
border-radius: 8px;
background: var(--surface);
box-shadow: var(--card-shadow);
transform: rotate(2.6deg);
}
.paper {
position: relative;
border-radius: 6px;
background: #ffffff;
box-shadow: var(--paper-shadow);
}
.paper img {
width: 100%;
border-radius: 6px;
}
.marker {
position: absolute;
display: grid;
width: 34px;
height: 34px;
place-items: center;
border-radius: 50%;
background: #c6ef6a;
color: #12301f;
font: 800 0.95rem/1 var(--font-display);
box-shadow:
0 0 0 5px rgb(198 239 106 / 0.4),
0 6px 14px rgb(16 34 25 / 0.25);
transform: translate(-50%, -50%);
}
.marker-1 {
top: 74.2%;
left: 89.5%;
}
.marker-2 {
top: 56.6%;
left: 6.4%;
}
.marker-3 {
top: 75.6%;
left: 6.4%;
}
.paper-caption {
margin-top: 28px;
color: var(--muted);
font-size: 0.9rem;
text-align: center;
}
.callouts {
display: grid;
gap: 22px;
margin-top: 36px;
counter-reset: callout;
}
.callouts li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 16px;
}
.callout-number {
display: grid;
grid-row: span 2;
width: 34px;
height: 34px;
place-items: center;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font: 800 0.95rem/1 var(--font-display);
}
.callouts h3 {
font-size: 1.15rem;
line-height: 34px;
}
.callouts p {
color: var(--muted);
}
.checks {
display: grid;
gap: 12px;
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.checks li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
font-weight: 550;
}
.checks .icon {
margin-top: 3px;
color: var(--icon-text);
}
@media (max-width: 899px) {
.invoice-grid {
grid-template-columns: minmax(0, 1fr);
}
.invoice-copy {
order: -1;
}
}
.payments-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
align-items: start;
gap: clamp(32px, 5vw, 80px);
}
.payments-visual {
position: relative;
}
.points {
display: grid;
gap: 30px;
}
.match {
position: absolute;
bottom: 6%;
left: -4%;
width: min(380px, 70%);
padding: 18px;
border: 1px solid var(--card-border);
border-radius: 22px;
background: var(--surface);
box-shadow: 0 26px 60px rgb(8 28 18 / 0.22);
}
.match-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.match-row .icon-tile {
width: 40px;
height: 40px;
border-radius: 13px;
}
.match-title {
display: block;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.3;
}
.match-meta {
display: block;
color: var(--muted);
font-size: 0.85rem;
line-height: 1.35;
}
.match-amount {
color: var(--icon-text);
font: 750 1rem/1.2 var(--font-display);
letter-spacing: -0.02em;
white-space: nowrap;
}
.match-link {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 12px 19px;
padding: 6px 0 6px 20px;
border-left: 2px dashed var(--line);
color: var(--muted);
font-size: 0.85rem;
font-weight: 650;
}
.match-link .icon {
color: var(--icon-text);
}
.status-paid {
padding: 5px 11px;
border-radius: 99px;
background: var(--icon-bg);
color: var(--icon-text);
font-size: 0.8rem;
font-weight: 750;
}
@media (max-width: 999px) {
.payments-grid {
grid-template-columns: minmax(0, 1fr);
}
.points {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 479px) {
.match-row {
grid-template-columns: auto minmax(0, 1fr);
}
.match-amount,
.status-paid {
grid-column: 2;
justify-self: start;
}
}
@media (max-width: 639px) {
.points {
grid-template-columns: minmax(0, 1fr);
}
.match {
position: relative;
bottom: auto;
left: auto;
width: auto;
margin: -48px 12px 0;
}
}
.section-stage {
margin: clamp(88px, 11vw, 160px) var(--inset) 0;
padding-block: clamp(64px, 8vw, 120px);
}
.section-stage .eyebrow {
color: var(--stage-muted);
}
.section-stage .section-intro {
color: var(--stage-muted);
}
.stage-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 40px;
margin-top: clamp(40px, 5vw, 64px);
}
.stage-points .icon-tile {
background: rgb(198 239 106 / 0.14);
color: #c6ef6a;
}
.stage-points p {
color: var(--stage-muted);
}
@media (max-width: 899px) {
.stage-points {
grid-template-columns: minmax(0, 1fr);
}
}
.phone-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(40px, 6vw, 96px);
}
.phone-grid .points {
margin-top: 36px;
}
.phones {
display: flex;
align-items: center;
justify-content: center;
padding-block: 24px;
}
.phones .phone {
flex: 0 0 34%;
}
.phones .phone:nth-child(1) {
z-index: 1;
margin-right: -7%;
transform: translateY(6%) rotate(-4deg) scale(0.9);
}
.phones .phone:nth-child(2) {
z-index: 2;
}
.phones .phone:nth-child(3) {
z-index: 1;
margin-left: -7%;
transform: translateY(6%) rotate(4deg) scale(0.9);
}
@media (max-width: 899px) {
.phone-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 639px) {
.phones {
justify-content: flex-start;
gap: 16px;
margin-inline: calc(-1 * var(--gutter));
padding: 8px var(--gutter) 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.phones::-webkit-scrollbar {
display: none;
}
.phones .phone,
.phones .phone:nth-child(n) {
flex: 0 0 min(64vw, 260px);
margin: 0;
transform: none;
scroll-snap-align: center;
}
}
.security-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.security-grid .card {
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(24px, 2.4vw, 32px);
}
.security-grid .card h3 {
margin-top: 8px;
}
.security-grid .card p {
color: var(--muted);
font-size: 1rem;
}
.backup {
grid-row: span 2;
grid-column: span 2;
}
.backup h3 {
font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
letter-spacing: -0.04em;
}
.backup p {
max-width: 56ch;
}
.tree {
margin-top: auto;
padding: 20px 22px;
border-radius: 18px;
background: var(--soft);
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
font-size: 0.88rem;
line-height: 1.5;
}
.tree-root {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.tree-root .icon {
color: var(--icon-text);
}
.tree ul {
margin: 10px 0 0 9px;
border-left: 1px solid var(--line);
}
.tree li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2px 16px;
padding: 5px 0 5px 20px;
}
.tree li span:last-child {
color: var(--muted);
font-family: var(--font-text);
}
@media (max-width: 999px) {
.security-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.backup {
grid-row: auto;
}
}
@media (max-width: 639px) {
.security-grid {
grid-template-columns: minmax(0, 1fr);
}
.backup {
grid-column: auto;
}
.tree {
padding: 16px;
}
}
.accounting-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: clamp(32px, 5vw, 72px);
}
.formats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.format {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
}
.file {
position: relative;
display: grid;
width: 52px;
height: 64px;
margin-bottom: 10px;
place-items: end center;
padding-bottom: 9px;
border-radius: 8px 18px 8px 8px;
background: var(--icon-bg);
color: var(--icon-text);
font: 800 0.72rem/1 var(--font-text);
letter-spacing: 0.02em;
}
.file::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 18px;
height: 18px;
border-radius: 0 18px 0 8px;
background: var(--line);
}
.format h3 {
font-size: 1.15rem;
}
.format p {
color: var(--muted);
font-size: 0.98rem;
}
.note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
margin-top: 20px;
padding: 16px 18px;
border-radius: 18px;
background: var(--soft);
color: var(--muted);
font-size: 0.95rem;
}
.note .icon {
margin-top: 2px;
color: var(--icon-text);
}
@media (max-width: 899px) {
.accounting-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 479px) {
.formats {
grid-template-columns: minmax(0, 1fr);
}
}
.faq-grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 32px 72px;
}
.faq-grid .section-head {
position: sticky;
top: calc(var(--header-height) + 32px);
align-self: start;
}
.faq-list {
border-top: 1px solid var(--line);
}
.faq-list details {
border-bottom: 1px solid var(--line);
}
.faq-list summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 4px;
border-radius: 12px;
font: 700 clamp(1.08rem, 1rem + 0.3vw, 1.25rem) / 1.3 var(--font-display);
letter-spacing: -0.02em;
list-style: none;
cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-toggle {
display: grid;
flex-shrink: 0;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--icon-text);
transition: transform 0.2s ease;
}
.faq-list details[open] .faq-toggle {
transform: rotate(45deg);
}
.faq-list details p {
max-width: 62ch;
padding: 0 4px 24px;
color: var(--muted);
}
@media (max-width: 899px) {
.faq-grid {
grid-template-columns: minmax(0, 1fr);
}
.faq-grid .section-head {
position: static;
}
}
.beta {
margin: clamp(88px, 11vw, 160px) var(--inset) 0;
padding-block: clamp(56px, 8vw, 112px);
border-radius: var(--radius-stage);
background: #c6ef6a;
color: #12301f;
--focus: #12301f;
--dot: #12301f;
--link: #12301f;
}
.beta-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
align-items: end;
gap: 32px 64px;
}
.beta .eyebrow {
color: #2c4a35;
}
.beta h2 {
font-size: clamp(2.3rem, 1.2rem + 4vw, 5rem);
}
.beta-text {
color: #2c4a35;
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}
.beta-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-top: 28px;
}
.beta-host {
color: #2c4a35;
font-weight: 650;
}
@media (max-width: 899px) {
.beta-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.site-footer {
margin-top: clamp(64px, 8vw, 104px);
padding-block: 40px calc(32px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.footer-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 40px;
}
.footer-brand {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
}
.footer-brand p {
color: var(--muted);
font-size: 0.95rem;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
}
.footer-links a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 0 12px;
border-radius: 99px;
color: var(--text);
font-size: 0.95rem;
font-weight: 650;
text-decoration: none;
}
.footer-links a:hover {
background: var(--hover);
}
.footer-legal {
margin-top: 24px;
color: var(--muted);
font-size: 0.88rem;
}
.not-found {
display: grid;
min-height: 60vh;
place-items: center;
padding: 64px 0;
text-align: center;
}
.not-found h1 {
font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
letter-spacing: -0.045em;
}
.not-found p {
margin: 16px 0 28px;
color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media print {
.site-header,
.hero-visual,
.phones,
.beta-actions {
display: none;
}
}