/* Fonts are loaded via tags in each template's (not @import) so the browser can fetch them in parallel instead of blocking on this file finishing download+parse first. */ /* ══════════════════════════════════════════════════════════════════════ DESIGN TOKENS — LIGHT MODE ══════════════════════════════════════════════════════════════════════ */ :root { --bg-deep: #f8fafc; --bg-surface: #ffffff; --bg-base: #f8fafc; --bg-alt: #f1f5f9; --bg-elevated: #ffffff; --bg-card: #ffffff; --glass-bg: #ffffff; --glass-border: #e2e8f0; --glass-glow: inset 0 1px 0 rgba(0,0,0,0.03); --glass-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.07); --border: #e2e8f0; --border-md: #cbd5e1; --border-bright: #94a3b8; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #5b6b80; --green: #16a34a; --green-dark: #15803d; --green-dim: #f0fdf4; --green-glow: rgba(22,163,74,0.2); --green-text: #16a34a; --green-light: #f0fdf4; --green-border: #bbf7d0; --shadow-hover: 0 4px 12px rgba(0,0,0,.07), 0 16px 40px rgba(0,0,0,.1); --bg-dark: #060b14; --blue: #2563eb; --blue-dark: #1d4ed8; --blue-dim: #eff6ff; --red: #ef4444; --red-dark: #dc2626; --red-dim: #fef2f2; --red-light: #fef2f2; --red-text: #dc2626; --gold: #f59e0b; --gold-dark: #d97706; --gold-dim: #fffbeb; --gold-glow: rgba(245,158,11,0.2); --amber: #f59e0b; --amber-dim: #fffbeb; --purple-dim: #f5f3ff; --teal-dim: #f0fdfa; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-400: #94a3b8; --gray-600: #475569; --gray-900: #0f172a; --white: #ffffff; --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius: 12px; --radius-sm: 7px; --shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.07); --shadow-lg: 0 8px 32px rgba(0,0,0,0.1); } /* ══ RESET & BASE ══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ══ APP NAVBAR ════════════════════════════════════════════════════════ */ .navbar { position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); height: 64px; display: flex; align-items: center; padding: 0 32px; justify-content: space-between; border-bottom: 1px solid var(--border); } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo { flex-shrink: 0; } .brand-wordmark { height: 34px; width: auto; display: block; mix-blend-mode: multiply; } .landing-footer-brand .brand-wordmark { height: 26px; } .auth-logo .brand-wordmark { height: 38px; } .nav-wordmark { font-size: 17px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.4px; } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-user { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14px; } .nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--green-dim); border: 2px solid rgba(22,163,74,0.2); color: var(--green); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-transform: uppercase; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-link { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); transition: color .15s, background .15s; } .nav-link:hover { color: var(--text-primary); background: var(--bg-alt); } .nav-link-active { color: var(--green); background: var(--green-dim); font-weight: 600; } .nav-signout { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-md); transition: background .15s, color .15s, border-color .15s; } .nav-signout:hover { background: var(--bg-alt); color: var(--text-primary); border-color: var(--border-bright); } /* ══ PAGE LAYOUT ═══════════════════════════════════════════════════════ */ .page { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; } .page-header { margin-bottom: 28px; } .page-header h1 { font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -.6px; line-height: 1.15; } .page-header p { margin-top: 5px; font-size: 14px; color: var(--text-secondary); } /* ══ STAT CARDS ════════════════════════════════════════════════════════ */ .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; position: relative; overflow: hidden; box-shadow: var(--shadow); transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-md); } .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 8px; } .stat-value { font-size: 24px; font-weight: 800; letter-spacing: -.8px; color: var(--text-primary); font-variant-numeric: tabular-nums; } .stat-card-income { border-top: 3px solid var(--green); } .stat-card-expenses { border-top: 3px solid var(--red); } .stat-card-profit { border-top: 3px solid var(--green); } .stat-card-profit .stat-value { color: var(--green); } .stat-card-profit-negative { border-top: 3px solid var(--red); } .stat-card-profit-negative .stat-value { color: var(--red); } .stat-card-tax { border-top: 3px solid var(--gold); } .stat-icon { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon-income { background: var(--green-dim); color: var(--green); } .stat-icon-expenses { background: var(--red-dim); color: var(--red); } .stat-icon-profit { background: var(--green-dim); color: var(--green); } .stat-icon-tax { background: var(--gold-dim); color: var(--gold); } /* ══ TAX CALLOUT ═══════════════════════════════════════════════════════ */ .tax-callout { background: var(--green-dim); border: 1px solid rgba(22,163,74,0.18); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; box-shadow: var(--shadow); } .tax-callout::before { content:''; position: absolute; top:0; left:0; right:0; height:3px; background: var(--green); } .tax-callout-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color: var(--green-dark); margin-bottom:4px; } .tax-callout-value { font-size:32px; font-weight:900; color: var(--green-dark); letter-spacing:-1.2px; font-variant-numeric:tabular-nums; } .tax-callout-note { font-size:12px; color: var(--text-muted); margin-top:4px; } /* ══ FORMS GRID & PANELS ═══════════════════════════════════════════════ */ .forms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; position: relative; overflow: hidden; } .panel:hover { border-color: var(--border-md); box-shadow: var(--shadow-lg); } .panel-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; } .panel-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; } .panel-income { border-top: 3px solid var(--green); } .panel-expense { border-top: 3px solid var(--red); } /* ══ FORM ELEMENTS ═════════════════════════════════════════════════════ */ label { display:block; font-size:13px; font-weight:600; color: var(--text-secondary); margin-bottom:5px; } input { width:100%; padding:10px 13px; margin-bottom:13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size:14px; font-family: var(--font-body); background: var(--bg-surface); color: var(--text-primary); transition: border-color .15s, box-shadow .15s; } input::placeholder { color: var(--text-muted); } input:focus { outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.12); } button:focus-visible, .button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } button, .button { display:inline-block; width:100%; padding:11px 18px; border:none; border-radius: var(--radius-sm); background: var(--green); color:#ffffff; font-size:14px; font-weight:700; font-family: var(--font-body); cursor:pointer; text-align:center; text-decoration:none; transition: background .15s, box-shadow .15s, transform .15s; } button:hover, .button:hover { background: var(--green-dark); box-shadow: 0 4px 16px rgba(22,163,74,.3); transform: translateY(-1px); } button:active { transform: scale(.98); } .btn-red { background: var(--red); color:#fff; } .btn-red:hover { background: var(--red-dark); box-shadow: 0 4px 14px rgba(239,68,68,.25); } /* ══ TRANSACTIONS PANEL ════════════════════════════════════════════════ */ .transactions-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); } .transactions-header { padding:18px 24px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; background: var(--bg-surface); } .transactions-header h2 { font-size:15px; font-weight:700; color: var(--text-primary); } .tx-count { font-size:12px; font-weight:600; color: var(--text-muted); background: var(--bg-alt); padding:3px 10px; border-radius:20px; border:1px solid var(--border); } table { width:100%; border-collapse:collapse; } th { text-align:left; padding:9px 24px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color: var(--text-muted); background: var(--bg-alt); border-bottom:1px solid var(--border); } td { padding:13px 24px; font-size:14px; border-bottom:1px solid var(--border); color: var(--text-primary); } tr:last-child td { border-bottom:none; } tr:hover td { background: var(--bg-alt); } .badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; } .badge-income { background: var(--green-dim); color: var(--green-dark); border:1px solid rgba(22,163,74,.18); } .badge-expense { background: var(--red-dim); color: var(--red-dark); border:1px solid rgba(239,68,68,.18); } .amount-income { font-weight:700; color: var(--green-dark); font-variant-numeric:tabular-nums; } .amount-expense { font-weight:700; color: var(--red-dark); font-variant-numeric:tabular-nums; } /* ══ BUTTON VARIANTS ═══════════════════════════════════════════════════ */ .btn-delete { width:auto; padding:5px 12px; background:transparent; color: var(--text-muted); font-size:12px; font-weight:600; border:1.5px solid var(--border); border-radius:6px; transition: background .15s, color .15s, border-color .15s; box-shadow:none; } .btn-delete:hover { background: var(--red-dim); color: var(--red-dark); border-color:rgba(239,68,68,.3); transform:none; box-shadow:none; } .btn-export-large { display:inline-block; width:auto; padding:10px 18px; background: var(--bg-surface); color: var(--text-primary); font-size:14px; font-weight:600; border-radius: var(--radius-sm); text-decoration:none; font-family: var(--font-body); white-space:nowrap; border:1px solid var(--border); box-shadow: var(--shadow); transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; } .btn-export-large:hover { background: var(--bg-alt); border-color: var(--border-md); transform:translateY(-1px); box-shadow: var(--shadow-lg); } .btn-export { display:inline-block; width:auto; padding:6px 13px; background: var(--bg-surface); color: var(--text-secondary); font-size:12px; font-weight:600; border-radius: var(--radius-sm); text-decoration:none; font-family: var(--font-body); border:1px solid var(--border); box-shadow:none; transition: background .15s, color .15s; } .btn-export:hover { background: var(--bg-alt); color: var(--text-primary); } /* ══ EMPTY STATES & CHIPS ══════════════════════════════════════════════ */ .empty-state { text-align:center; padding:56px 28px; color: var(--text-muted); font-size:14px; } .empty-state-icon { font-size:36px; margin-bottom:12px; opacity:.4; } .category-chip { display:flex; align-items:center; gap:8px; background: var(--bg-alt); border-radius:20px; padding:7px 14px; border:1px solid var(--border); } .category-chip-name { font-size:13px; font-weight:600; color: var(--text-secondary); } .category-chip-amount { font-size:13px; font-weight:700; color: var(--red-dark); font-variant-numeric:tabular-nums; } /* ══ SELECT ════════════════════════════════════════════════════════════ */ select { width:100%; padding:10px 13px; margin-bottom:13px; border:1.5px solid var(--border); border-radius: var(--radius-sm); font-size:14px; font-family: var(--font-body); background: var(--bg-surface); color: var(--text-primary); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; cursor:pointer; transition: border-color .15s, box-shadow .15s; } select:focus { outline:none; border-color: var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.12); } select option { background:#ffffff; color: var(--text-primary); } /* ══ REG SECTION LABELS ════════════════════════════════════════════════ */ .reg-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color: var(--text-muted); margin:22px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border); } /* ══ AUTH PAGES ════════════════════════════════════════════════════════ */ .auth-body { background: var(--bg-deep); min-height:100vh; display:flex; align-items:center; justify-content:center; background-image: radial-gradient(ellipse at 25% 40%, rgba(22,163,74,.06) 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(37,99,235,.04) 0%, transparent 50%); } .auth-wrapper { width:100%; max-width:420px; padding:24px; } .auth-brand { display:flex; align-items:center; gap:10px; color: var(--text-primary); font-size:20px; font-weight:800; justify-content:center; margin-bottom:28px; letter-spacing:-.4px; } .auth-card { background: var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:40px; box-shadow:0 4px 24px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04); position:relative; } .auth-logo { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:800; color: var(--text-primary); margin-bottom:26px; letter-spacing:-.3px; } .auth-title { font-size:22px; font-weight:800; color: var(--text-primary); margin-bottom:4px; letter-spacing:-.4px; } .auth-subtitle, .auth-sub { font-size:14px; color: var(--text-secondary); margin-bottom:22px; line-height:1.55; } .auth-error { background: var(--red-dim); border:1px solid rgba(239,68,68,.22); color: var(--red-dark); padding:12px 16px; border-radius: var(--radius-sm); font-size:13px; margin-bottom:18px; } .auth-success { background: var(--green-dim); border:1px solid rgba(22,163,74,.22); color: var(--green-dark); padding:12px 16px; border-radius: var(--radius-sm); font-size:13px; margin-bottom:18px; } .auth-btn { margin-top:6px; } .auth-switch { margin-top:20px; text-align:center; color: var(--text-muted); font-size:13px; } .auth-switch a { color: var(--green); text-decoration:none; font-weight:600; } .auth-switch a:hover { text-decoration:underline; } /* ══ REMINDER BANNER ═══════════════════════════════════════════════════ */ .reminder-banner { display:flex; align-items:center; gap:14px; background: var(--gold-dim); border:1.5px solid rgba(245,158,11,.22); border-radius: var(--radius); padding:14px 18px; margin-bottom:20px; flex-wrap:wrap; } .reminder-urgent { background: var(--red-dim); border-color:rgba(239,68,68,.22); } .reminder-icon { font-size:20px; flex-shrink:0; } .reminder-body { flex:1; font-size:14px; color: var(--text-primary); display:flex; flex-direction:column; gap:2px; } .reminder-sub { font-size:12px; color: var(--text-secondary); font-weight:400; } .reminder-link { font-size:13px; font-weight:700; color: var(--green); text-decoration:none; white-space:nowrap; } .reminder-link:hover { text-decoration:underline; } /* ══ YEAR PILLS ════════════════════════════════════════════════════════ */ .year-filter { display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; } .year-filter-label { font-size:13px; font-weight:600; color: var(--text-muted); } .year-pill { font-size:13px; font-weight:600; padding:5px 14px; border-radius:20px; background: var(--bg-surface); color: var(--text-secondary); text-decoration:none; border:1px solid var(--border); transition: background .15s, color .15s, border-color .15s; } .year-pill:hover { background: var(--bg-alt); color: var(--text-primary); border-color: var(--border-md); } .year-pill-active { background: var(--green-dim); color: var(--green-dark); border-color:rgba(22,163,74,.22); font-weight:700; } /* ══ TX FILTERS ════════════════════════════════════════════════════════ */ .tx-filters { display:flex; gap:10px; padding:10px 24px; border-bottom:1px solid var(--border); flex-wrap:wrap; background: var(--bg-alt); } .tx-filters input { flex:1; min-width:160px; margin-bottom:0; } .tx-filters select { width:auto; min-width:140px; margin-bottom:0; } /* ══ TABLE SCROLL & HAMBURGER ══════════════════════════════════════════ */ .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:transparent; border:none; padding:6px; cursor:pointer; border-radius: var(--radius-sm); box-shadow:none; } .nav-hamburger:hover { background: var(--bg-alt); box-shadow:none; } .nav-hamburger span { display:block; height:2px; background: var(--text-secondary); border-radius:2px; width:100%; } /* ══ APP RESPONSIVE ════════════════════════════════════════════════════ */ @media (max-width:900px) { .stats-grid { grid-template-columns:repeat(2,1fr); } .tax-callout { flex-direction:column; gap:12px; } } @media (max-width:700px) { .nav-links { display:none; position:absolute; top:64px; left:0; right:0; background:rgba(255,255,255,.98); backdrop-filter:blur(16px); flex-direction:column; padding:12px 16px; gap:4px; z-index:99; border-bottom:1px solid var(--border); } .nav-links.nav-links-open { display:flex; } .nav-hamburger { display:flex; } .nav-user-desktop { display:none; } .navbar { position:relative; } } @media (max-width:640px) { .stats-grid { grid-template-columns:1fr 1fr; } .forms-grid { grid-template-columns:1fr; } .page { padding:20px 16px 56px; } .navbar { padding:0 16px; } th, td { padding:11px 16px; } .auth-card { padding:28px 22px; } .hide-mobile { display:none; } .tx-filters { padding:10px 16px; } .transactions-header { padding:14px 16px 10px; } } @media (max-width:400px) { .stats-grid { grid-template-columns:1fr; } } /* ══ TOAST ══════════════════════════════════════════════════════════════ */ .toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; } .toast { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:10px; font-size:14px; font-weight:500; box-shadow:0 8px 32px rgba(0,0,0,.12); min-width:240px; animation:toast-in .3s cubic-bezier(.16,1,.3,1); background: var(--bg-card); border:1px solid var(--border); color: var(--text-primary); } @keyframes toast-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } } .toast-success { border-left:3px solid var(--green); } .toast-error { border-left:3px solid var(--red); } .toast span { flex:1; } .toast-close { width:auto; padding:0; background:transparent; color: var(--text-muted); font-size:18px; line-height:1; border:none; cursor:pointer; box-shadow:none; } .toast-close:hover { color: var(--text-primary); background:transparent; box-shadow:none; transform:none; } /* ══ PAGINATION ════════════════════════════════════════════════════════ */ .pagination { display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 0 4px; } .page-btn { display:inline-flex; align-items:center; padding:7px 16px; border-radius:7px; background: var(--bg-surface); color: var(--text-secondary); font-size:13px; font-weight:600; text-decoration:none; border:1px solid var(--border); transition: background .15s, border-color .15s, color .15s; } .page-btn:hover { background: var(--bg-alt); border-color: var(--border-md); color: var(--text-primary); } .page-btn-disabled { opacity:.4; cursor:default; pointer-events:none; } .page-info { font-size:13px; color: var(--text-muted); min-width:100px; text-align:center; } /* ══ SCROLL ANIMATIONS ═════════════════════════════════════════════════ */ .fade-up { opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } .fade-up.is-visible { opacity:1; transform:translateY(0); } .fade-up:nth-child(2) { transition-delay:.06s; } .fade-up:nth-child(3) { transition-delay:.12s; } .fade-up:nth-child(4) { transition-delay:.18s; } .fade-up:nth-child(5) { transition-delay:.24s; } .fade-up:nth-child(6) { transition-delay:.30s; } /* ══════════════════════════════════════════════════════════════════════ LANDING — LIGHT-MODE ══════════════════════════════════════════════════════════════════════ */ .landing-body { background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-body); margin:0; padding:0; } /* Nav */ .landing-nav { position:sticky; top:0; z-index:200; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); height:64px; display:flex; align-items:center; padding:0 48px; justify-content:space-between; } .landing-nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; } .landing-nav-wordmark { font-size:17px; font-weight:800; color: var(--text-primary); letter-spacing:-.4px; } .landing-nav-actions { display:flex; align-items:center; gap:10px; } .landing-nav-signin { font-size:14px; font-weight:500; color: var(--text-secondary); text-decoration:none; padding:7px 16px; border-radius:7px; transition:color .15s,background .15s; } .landing-nav-signin:hover { color: var(--text-primary); background: var(--bg-deep); } .landing-nav-cta { font-size:14px; font-weight:700; color:#ffffff; background: var(--green); text-decoration:none; padding:8px 20px; border-radius:7px; transition:background .15s,box-shadow .2s; white-space:nowrap; display:inline-block; } .landing-nav-cta:hover { background: var(--green-dark); box-shadow:0 4px 16px rgba(22,163,74,.28); } .landing-nav-links { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:2px; } .landing-nav-link { font-size:14px; font-weight:500; color: var(--text-secondary); text-decoration:none; padding:7px 14px; border-radius:7px; transition:color .15s,background .15s; } .landing-nav-link:hover { color: var(--text-primary); background: var(--bg-deep); } @media (max-width:768px) { .landing-nav-links { display:none; } } /* Hero */ .landing-hero { background: var(--bg-surface); padding:88px 48px 96px; position:relative; overflow:hidden; } .landing-hero::after { content:''; position:absolute; top:-120px; right:-100px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(34,197,94,.12) 0%,transparent 70%); pointer-events:none; } .landing-hero::before { content:''; position:absolute; bottom:-160px; left:-120px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(13,28,62,.08) 0%,transparent 70%); pointer-events:none; } .landing-hero-inner { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; } .hero-content { text-align:left; } .hero-visual { position:relative; } .landing-hero-badge { display:inline-flex; align-items:center; gap:6px; background: var(--green-light); border:1px solid var(--green-border); color: var(--green); font-size:12px; font-weight:700; letter-spacing:.3px; padding:5px 12px; border-radius:20px; margin-bottom:24px; } .landing-hero-badge-dot { width:7px; height:7px; border-radius:50%; background: var(--green); flex-shrink:0; } .landing-hero h1 { font-size:clamp(44px,5vw,72px); font-weight:900; color: var(--text-primary); line-height:1.04; letter-spacing:-2px; margin-bottom:20px; } .hero-accent { color: var(--green); display:block; } .landing-hero-sub { font-size:18px; color: var(--text-secondary); line-height:1.65; max-width:460px; margin-bottom:36px; font-weight:400; } .landing-hero-btns { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:36px; } .hero-btn-primary { display:inline-block; background:linear-gradient(135deg,#22c55e,#16a34a); color:#ffffff; font-size:15px; font-weight:700; padding:14px 32px; border-radius:10px; text-decoration:none; box-shadow:0 4px 14px rgba(22,163,74,.28); transition:background .15s,box-shadow .2s,transform .2s; } .hero-btn-primary:hover { background: var(--green-dark); box-shadow:0 6px 24px rgba(22,163,74,.3); transform:translateY(-1px); } .hero-btn-secondary { display:inline-block; background:transparent; color: var(--text-secondary); font-size:15px; font-weight:600; padding:13px 24px; border-radius:8px; text-decoration:none; border:1.5px solid var(--border-md); transition:background .15s,border-color .15s,color .15s; } .hero-btn-secondary:hover { background: var(--bg-deep); color: var(--text-primary); border-color:#94a3b8; } .hero-social-proof { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-muted); font-weight:500; } .hero-proof-stars { color:#f59e0b; font-size:12px; letter-spacing:1px; } .hero-stats { display:flex; align-items:stretch; margin-top:32px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background: var(--bg-deep); } .hero-stat { flex:1; text-align:center; padding:18px 12px; } .hero-stat + .hero-stat { border-left:1px solid var(--border); } .hero-stat-num { display:block; font-size:26px; font-weight:800; color: var(--green); letter-spacing:-.5px; font-variant-numeric:tabular-nums; line-height:1.1; } .hero-stat-label { display:block; font-size:11px; color: var(--text-muted); font-weight:500; margin-top:4px; line-height:1.4; } /* Mockup */ .hero-mockup { background:#0c1228; border:1px solid #1e2d4a; border-radius:14px; padding:20px; box-shadow:0 32px 80px rgba(0,0,0,.22),0 8px 24px rgba(0,0,0,.1); position:relative; overflow:hidden; } .hero-mockup::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--green),#4ade80,var(--green-dark)); } .mockup-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06); } .mockup-title { font-size:12px; font-weight:600; color:rgba(255,255,255,.75); } .mockup-badge { font-size:10px; font-weight:700; background:rgba(22,163,74,.15); color:#4ade80; padding:3px 9px; border-radius:20px; border:1px solid rgba(22,163,74,.25); } .mockup-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .mockup-card { background:rgba(255,255,255,.05); border-radius:8px; padding:12px; border:1px solid rgba(255,255,255,.07); border-top:2px solid transparent; } .mockup-card-income { border-top-color:#22c55e; } .mockup-card-expense { border-top-color:#ef4444; } .mockup-card-tax { border-top-color:#f59e0b; } .mockup-card-take { border-top-color:#3b82f6; } .mockup-card-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.5); margin-bottom:6px; } .mockup-card-value { font-size:15px; font-weight:800; letter-spacing:-.4px; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; } .mockup-card-take .mockup-card-value { color:#4ade80; } .mockup-chart-row { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.05); } .mockup-chart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .mockup-chart-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.4); } .mockup-chart-change { font-size:10px; font-weight:700; color:#4ade80; background:rgba(22,163,74,.12); padding:2px 7px; border-radius:4px; } .mockup-chart-svg { width:100%; height:38px; display:block; } .mockup-txs { margin-top:8px; display:flex; flex-direction:column; gap:5px; } .mockup-tx { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:rgba(255,255,255,.03); border-radius:6px; } .mockup-tx-info { display:flex; align-items:center; gap:8px; } .mockup-tx-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .mockup-tx-dot-green { background:#22c55e; } .mockup-tx-dot-red { background:#f87171; } .mockup-tx-name { font-size:11px; color:rgba(255,255,255,.6); font-weight:500; } .mockup-tx-amount { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; font-family: var(--font-mono); } .mockup-tx-amount-pos { color:#4ade80; } .mockup-tx-amount-neg { color:#f87171; } /* Shared sections */ .section-inner { max-width:1100px; margin:0 auto; } .section-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color: var(--green); margin-bottom:12px; text-align:center; } .section-title { font-size:clamp(32px,4vw,50px); font-weight:900; color: var(--text-primary); letter-spacing:-1.5px; text-align:center; margin-bottom:16px; line-height:1.06; } .section-sub { font-size:17px; color: var(--text-secondary); text-align:center; max-width:520px; margin:0 auto 60px; line-height:1.7; } /* Trust bar */ .trust-signals-bar { padding:0 48px 80px; background: var(--bg-surface); } .trust-signals-inner { max-width:1100px; margin:0 auto; border:1px solid var(--border); border-radius:10px; padding:14px 36px; display:flex; align-items:center; justify-content:space-between; gap:20px; background: var(--bg-deep); flex-wrap:wrap; } .trust-signal { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color: var(--text-secondary); white-space:nowrap; } .trust-signal svg { color: var(--green); flex-shrink:0; } .trust-signal-sep { width:1px; height:16px; background: var(--border); flex-shrink:0; } /* Features */ .landing-features { padding:100px 48px; background: var(--bg-deep); border-top:1px solid var(--border); } .features-grid, .features-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .features-bento .feature-card:nth-child(n) { grid-column:auto; grid-row:auto; } .features-bento .feature-card:nth-child(1),.features-bento .feature-card:nth-child(5) { display:flex; align-items:flex-start; gap:16px; } .features-bento .feature-card:nth-child(1) .feature-icon-box,.features-bento .feature-card:nth-child(5) .feature-icon-box { flex-shrink:0; margin-bottom:0; } .feature-card { background: var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:28px 24px; box-shadow: var(--glass-shadow); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s; } .feature-card:hover { transform:translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--green-border); } .feature-icon-box { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0; } .feature-icon-green { background: var(--green-light); color: var(--green); border:1px solid var(--green-border); } .feature-icon-blue { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; } .feature-icon-purple { background:#f5f3ff; color:#7c3aed; border:1px solid #ddd6fe; } .feature-icon-amber { background:#fffbeb; color:#d97706; border:1px solid #fde68a; } .feature-icon-teal { background:#f0fdfa; color:#0f766e; border:1px solid #99f6e4; } .feature-icon-slate { background: var(--bg-deep); color:#475569; border:1px solid var(--border); } .feature-card h3 { font-size:15px; font-weight:700; color: var(--text-primary); margin-bottom:8px; letter-spacing:-.2px; } .feature-card p { font-size:14px; color: var(--text-secondary); line-height:1.68; } /* Bank sync */ .landing-banksync { padding:100px 48px; background: var(--green-light); border-top:1px solid var(--green-border); border-bottom:1px solid var(--green-border); } .landing-banksync .section-eyebrow { color: var(--green); } .landing-banksync .section-title { color: var(--text-primary); } .landing-banksync .section-sub { color: var(--text-secondary); } .banksync-stats-row { display:flex; align-items:center; background:#fff; border:1px solid var(--green-border); border-radius:12px; padding:28px 48px; margin:0 auto 48px; max-width:720px; width:100%; box-shadow:0 2px 8px rgba(22,163,74,.07); } .banksync-stat { flex:1; text-align:center; display:flex; flex-direction:column; gap:5px; } .banksync-stat-num { font-size:26px; font-weight:900; color: var(--green); letter-spacing:-.5px; } .banksync-stat-label { font-size:13px; color: var(--text-secondary); line-height:1.4; } .banksync-stat-divider { width:1px; height:44px; background: var(--border); flex-shrink:0; margin:0 24px; } .banksync-centered { display:flex; flex-direction:column; align-items:center; text-align:center; } .banksync-list-centered { max-width:500px; width:100%; } .banksync-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; } .banksync-list li { display:flex; align-items:flex-start; gap:10px; font-size:15px; color: var(--text-secondary); line-height:1.55; text-align:left; } .banksync-check { color: var(--green); font-weight:700; font-size:15px; flex-shrink:0; margin-top:2px; } /* Steps */ .landing-steps { padding:100px 48px; background: var(--bg-surface); border-top:1px solid var(--border); } .landing-steps .section-sub { color: var(--text-secondary); } .steps-row { display:flex; align-items:flex-start; max-width:880px; margin:0 auto; } .step { flex:1; text-align:center; padding:0 24px; } .step-number { width:48px; height:48px; border-radius:50%; background: var(--green-light); border:2px solid var(--green-border); color: var(--green); font-size:18px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; transition:background .25s,box-shadow .25s,border-color .25s,color .25s; } .step:hover .step-number { background: var(--green); border-color: var(--green-dark); color:#fff; box-shadow:0 4px 16px rgba(22,163,74,.3); } .step h3 { font-size:15px; font-weight:700; color: var(--text-primary); margin-bottom:10px; } .step p { font-size:14px; color: var(--text-secondary); line-height:1.7; } .step-arrow { display:flex; align-items:center; padding-top:24px; color: var(--border-md); font-size:18px; flex-shrink:0; } /* Testimonials */ .landing-testimonials { padding:100px 48px; background: var(--bg-deep); border-top:1px solid var(--border); } .landing-testimonials .section-sub { color: var(--text-secondary); } .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .testimonial-card { background: var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:14px; box-shadow: var(--glass-shadow); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s; } .testimonial-card:hover { transform:translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--green-border); } .testimonial-stars { color:#f59e0b; font-size:13px; letter-spacing:2px; } .testimonial-quote { font-size:15px; color: var(--text-secondary); line-height:1.72; flex:1; margin:0; } .testimonial-author { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--border); } .testimonial-avatar { width:40px; height:40px; border-radius:50%; background: var(--green-light); border:2px solid var(--green-border); color: var(--green); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .testimonial-author-info { display:flex; flex-direction:column; gap:2px; } .testimonial-author-info strong { font-size:14px; font-weight:700; color: var(--text-primary); } .testimonial-author-info span { font-size:12px; color: var(--text-muted); } /* CTA */ .landing-install { background: var(--bg-alt); padding:96px 48px; } .install-inner { display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:center; max-width:1140px; margin:0 auto; } .install-copy .section-title, .install-copy .section-sub { text-align:left; margin-left:0; } .install-steps { display:flex; flex-direction:column; gap:14px; margin-top:28px; } .install-step { display:flex; align-items:center; gap:14px; background: var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:16px 20px; font-size:15px; color: var(--text-secondary); line-height:1.5; } .install-step-platform { flex-shrink:0; background:#0d1c3e; color:#fff; font-size:12px; font-weight:700; letter-spacing:.4px; padding:6px 12px; border-radius:8px; } .install-visual { display:flex; justify-content:center; } .install-phone { display:flex; flex-direction:column; align-items:center; gap:10px; background:linear-gradient(160deg,#0d1c3e,#1a2f5e); border-radius:32px; padding:56px 64px; box-shadow:0 24px 64px rgba(13,28,62,.35); } .install-icon { width:96px; height:96px; border-radius:22px; box-shadow:0 8px 24px rgba(0,0,0,.35); } .install-icon-label { color:#fff; font-size:13px; font-weight:500; } @media (max-width:860px) { .install-inner { grid-template-columns:1fr; gap:40px; } .install-copy .section-title, .install-copy .section-sub { text-align:center; margin-left:auto; margin-right:auto; } } .landing-cta { background: var(--bg-dark); padding:112px 48px; text-align:center; position:relative; overflow:hidden; } .landing-cta::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at 50% 0%,rgba(22,163,74,.12) 0%,transparent 65%); pointer-events:none; } .landing-cta h2 { font-size:clamp(40px,5.5vw,66px); font-weight:900; color:#ffffff; letter-spacing:-2px; margin-bottom:18px; line-height:1.06; position:relative; } .landing-cta p { font-size:17px; color:rgba(255,255,255,.65); margin-bottom:44px; max-width:440px; margin-left:auto; margin-right:auto; line-height:1.7; position:relative; } .cta-btn { display:inline-block; background: var(--green); color:#ffffff; font-size:16px; font-weight:700; padding:16px 48px; border-radius:9px; text-decoration:none; transition:background .15s,box-shadow .2s,transform .2s; position:relative; } .cta-btn:hover { background: var(--green-dark); transform:translateY(-2px); box-shadow:0 8px 32px rgba(22,163,74,.4); } /* Footer */ .landing-footer { background:#040812; padding:40px 48px; border-top:1px solid rgba(255,255,255,.06); } .landing-footer-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; } .landing-footer-brand { display:flex; align-items:center; gap:10px; text-decoration:none; } .landing-footer-wordmark { font-size:15px; font-weight:700; color:rgba(255,255,255,.6); } .landing-footer-disclaimer { font-size:12px; color:rgba(255,255,255,.45); max-width:360px; line-height:1.55; } .landing-footer-links { display:flex; gap:24px; } .landing-footer-links a { font-size:13px; color:rgba(255,255,255,.55); text-decoration:none; transition:color .15s; } .landing-footer-links a:hover { color:rgba(255,255,255,.88); } /* Landing responsive */ @media (max-width:1000px) { .features-bento { grid-template-columns:repeat(2,1fr); } .banksync-stats-row { flex-direction:column; padding:24px 28px; gap:18px; } .banksync-stat-divider { width:80%; height:1px; margin:0; } .testimonials-grid { grid-template-columns:1fr 1fr; } .trust-signals-inner { justify-content:center; gap:14px; } .trust-signal-sep { display:none; } .features-bento .feature-card:nth-child(1),.features-bento .feature-card:nth-child(5) { flex-direction:column; gap:0; } .features-bento .feature-card:nth-child(1) .feature-icon-box,.features-bento .feature-card:nth-child(5) .feature-icon-box { margin-bottom:14px; } } @media (max-width:860px) { .landing-hero-inner { grid-template-columns:1fr; gap:48px; } .hero-content { text-align:center; } .landing-hero-sub { margin-left:auto; margin-right:auto; } .landing-hero-btns { justify-content:center; } .hero-social-proof { justify-content:center; } .hero-stats { max-width:420px; margin:28px auto 0; } .hero-visual { max-width:480px; margin:0 auto; } } @media (max-width:700px) { .landing-nav { padding:0 20px; } .landing-hero { padding:64px 20px 72px; } .landing-features,.landing-steps,.landing-cta,.landing-banksync,.landing-testimonials,.landing-install { padding:72px 20px; } .trust-signals-bar { padding:0 20px 64px; } .trust-signals-inner { padding:12px 20px; } .landing-footer { padding:32px 20px; } .steps-row { flex-direction:column; align-items:center; } .step-arrow { transform:rotate(90deg); padding:0; margin:8px 0; } } @media (max-width:600px) { .features-bento { grid-template-columns:1fr; } .mockup-grid { grid-template-columns:repeat(2,1fr); } .testimonials-grid { grid-template-columns:1fr; } .landing-footer-inner { flex-direction:column; align-items:flex-start; } .hero-stats { flex-direction:column; border-radius:10px; max-width:100%; } .hero-stat+.hero-stat { border-left:none; border-top:1px solid var(--border); } } @media (prefers-reduced-motion:reduce) { *,::before,::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } .fade-up { opacity:1; transform:none; } } /* ══ UTILITIES ══════════════════════════════════════════════════════════ */ /* Logo text in auth pages */ .auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:22px; } .auth-logo-text { font-size:17px; font-weight:800; color:var(--text-primary); letter-spacing:-.3px; } /* Spinner for async buttons */ @keyframes spin { to { transform:rotate(360deg); } } .btn-spinner { display:inline-block; width:13px; height:13px; vertical-align:middle; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .65s linear infinite; margin-right:4px; } /* Neutral (grey) button used on password update */ button.btn-neutral, .btn-neutral { background: var(--text-secondary); color:#fff; } button.btn-neutral:hover, .btn-neutral:hover { background: var(--text-primary); box-shadow:0 4px 14px rgba(0,0,0,.15); } /* ── Nav Pro badge & Upgrade CTA ─────────────────────────────────────── */ .nav-pro-badge { display:inline-flex; align-items:center; background:var(--green); color:#fff; font-size:10px; font-weight:800; letter-spacing:.8px; padding:3px 9px; border-radius:20px; line-height:1; align-self:center; } .nav-upgrade { display:inline-flex; align-items:center; background:var(--green); color:#fff !important; font-size:13px; font-weight:700; padding:6px 14px; border-radius:8px; text-decoration:none; transition:background .15s, box-shadow .15s; align-self:center; } .nav-upgrade:hover { background:var(--green-dark); box-shadow:0 2px 10px rgba(22,163,74,.3); } /* ── Pricing page ────────────────────────────────────────────────────── */ .pricing-page { max-width:860px; margin:0 auto; padding:56px 24px 80px; } .pricing-hero { text-align:center; margin-bottom:40px; } .pricing-hero-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--green); margin-bottom:10px; } .pricing-hero h1 { font-size:clamp(30px,4.5vw,42px); font-weight:900; color:var(--text-primary); letter-spacing:-1px; line-height:1.1; margin-bottom:12px; } .pricing-hero p { font-size:16px; color:var(--text-secondary); max-width:480px; margin:0 auto; line-height:1.6; } .pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:720px; margin:0 auto; align-items:start; } .pricing-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:28px 26px; position:relative; box-shadow:var(--glass-shadow); transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; } .pricing-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); } .pricing-card-featured { border:2px solid var(--green); box-shadow:0 4px 12px rgba(22,163,74,.08), 0 16px 40px rgba(22,163,74,.12); } .pricing-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; font-size:11px; font-weight:700; padding:4px 14px; border-radius:20px; letter-spacing:.6px; white-space:nowrap; box-shadow:0 2px 8px rgba(22,163,74,.3); } .pricing-plan-name { font-size:18px; font-weight:800; color:var(--text-primary); letter-spacing:-.3px; } .pricing-price { font-size:40px; font-weight:900; color:var(--text-primary); letter-spacing:-1.5px; margin:14px 0 2px; font-variant-numeric:tabular-nums; } .pricing-price-period { font-size:15px; font-weight:500; color:var(--text-muted); letter-spacing:0; } .pricing-price-note { font-size:13px; color:var(--text-muted); margin-bottom:22px; } .pricing-features { list-style:none; padding:0; margin:0 0 22px; font-size:14px; color:var(--text-primary); } .pricing-features li { display:flex; align-items:flex-start; gap:10px; padding:5px 0; line-height:1.5; } .feat-mark { flex-shrink:0; width:18px; height:18px; border-radius:50%; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; } .feat-yes .feat-mark { background:var(--green-dim); color:var(--green); } .feat-no { color:var(--text-muted); } .feat-no .feat-mark { background:var(--bg-alt); color:var(--text-muted); } .pricing-current { text-align:center; background:var(--green-dim); color:var(--green); border:1px solid var(--green-border); border-radius:8px; padding:10px; font-size:13px; font-weight:700; } .pricing-current-muted { background:var(--bg-alt); color:var(--text-muted); border-color:var(--border); } .pricing-agency { max-width:720px; margin:28px auto 0; background:var(--bg-deep); border:1px dashed var(--border-md); border-radius:12px; padding:22px 26px; text-align:center; } .pricing-agency-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:6px; } .pricing-agency-sub { font-size:13px; color:var(--text-secondary); line-height:1.6; } .pricing-faq { max-width:720px; margin:48px auto 0; } .pricing-faq-title { font-size:18px; font-weight:800; color:var(--text-primary); letter-spacing:-.3px; margin-bottom:12px; } .faq-item { border-bottom:1px solid var(--border); padding:14px 0; } .faq-item:last-child { border-bottom:none; } .faq-q { font-weight:700; color:var(--text-primary); font-size:14px; margin-bottom:4px; } .faq-a { font-size:13px; color:var(--text-secondary); line-height:1.6; } @media (max-width:700px) { .pricing-grid { grid-template-columns:1fr; max-width:420px; } .pricing-card-featured { order:-1; } .pricing-page { padding:40px 16px 64px; } } /* ── Legal pages (terms / privacy) ───────────────────────────────────── */ .legal-page { max-width:720px; margin:0 auto; padding:56px 24px 80px; } .legal-page h1 { font-size:32px; font-weight:900; color:var(--text-primary); letter-spacing:-.8px; margin-bottom:6px; } .legal-updated { font-size:13px; color:var(--text-muted); margin-bottom:32px; } .legal-page h2 { font-size:17px; font-weight:800; color:var(--text-primary); letter-spacing:-.3px; margin:28px 0 10px; } .legal-page p { font-size:14px; color:var(--text-secondary); line-height:1.75; margin-bottom:12px; } .legal-page a { color:var(--green); font-weight:600; text-decoration:none; } .legal-page a:hover { text-decoration:underline; }