/* ==========================================================================
   Geometry Design System — Theme Override
   "Colorful Warm Flat" — friendly, modern SaaS aesthetic
   Load AFTER style.css to override neumorphic defaults.
   ========================================================================== */

/* --- Self-hosted fonts --- */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kalam';
    src: url('../fonts/kalam-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    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: 'Kalam';
    src: url('../fonts/kalam-700-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    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;
}

/* --- Token overrides --- */
:root {
    /* Core palette */
    --canvas: #FFFFFF;
    --ink: #120A0B;
    --muted: #454140;
    --dim: #454140;
    --divider: #E3E2E2;
    --accent: #FFD86F;

    /* Surfaces */
    --card-bg: #FFFFFF;
    --card-border: #F8F4F1;
    --card-shadow-light: transparent;
    --card-shadow-dark: transparent;
    --card-inset-border: rgba(248,244,241,0.6);

    /* Navbar */
    --nav-bg: #FFFFFF;
    --nav-icon-gradient-start: #120A0B;
    --nav-icon-gradient-end: #120A0B;

    /* Footer */
    --footer-bg: #120A0B;
    --footer-text: #F8F4F1;
    --footer-gradient-start: #454140;
    --footer-gradient-end: #120A0B;
    --footer-radius: 0;

    /* Heading gradient → flat solid */
    --grad-start: #120A0B;
    --grad-end: #120A0B;

    /* Buttons */
    --btn-bg: #120A0B;
    --btn-text: #FFFFFF;
    --btn-hover-bg: #2A2324;

    /* Forms */
    --input-bg: #FFFFFF;
    --input-border: #E3E2E2;
    --input-shadow: transparent;

    /* Feedback */
    --success-bg: #ECFDF3;
    --success-border: #B9F2D1;
    --success-text: #065F2B;
    --error-bg: #FEF2F2;
    --error-border: #FCC7C7;
    --error-text: #8A1414;
    --error-accent: #E04545;
    --field-error: #B42318;

    /* Fonts */
    --font-heading: 'Satoshi', system-ui, sans-serif;
    --font-body: 'Satoshi', system-ui, sans-serif;
    --font-hand: 'Kalam', cursive;

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 32px;

    /* Misc */
    --tooltip-bg: #120A0B;
    --tooltip-text: #FFFFFF;
    --dot-inactive: #E3E2E2;
    --dot-active: #120A0B;
    --section-alt-bg: #F8F4F1;
    --marker-color: #E3E2E2;
    --hover-bg: rgba(18,10,11,0.05);
}

/* ==========================================================================
   Component overrides — flat design (no neumorphic shadows)
   Using !important where needed to beat Tailwind CDN runtime styles
   and style.css hardcoded shadows.
   ========================================================================== */

/* --- Global: kill ALL neumorphic shadows --- */
.neu,
.neu-subtle {
    border: 1px solid var(--card-border) !important;
    box-shadow: none !important;
}

/* --- Typography: Geometry uses heavier heading weights --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
}
h1 {
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
}
.h1 {
    font-size: 64px !important;
    line-height: 1.1 !important;
}
.h2 {
    font-weight: 700 !important;
}
@media (max-width: 1024px) {
    .h1 { font-size: 56px !important; }
}
@media (max-width: 640px) {
    .h1 { font-size: 36px !important; letter-spacing: -1.4px !important; }
}

/* --- Tighten badge-to-heading spacing --- */
h2.mt-6,
.h2.mt-6 {
    margin-top: 12px !important;
}

/* --- Heading gradient → flat solid color --- */
.h-grad {
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--ink) !important;
    color: var(--ink) !important;
}

/* --- Navbar: 24px radius per Geometry spec --- */
nav .neu {
    border-radius: 24px !important;
}

/* --- Hero: warm cream-to-white gradient background --- */
.hero-section {
    background: linear-gradient(180deg, #f8f4f1 -14.0%, #faf8f6 25.6966%, #fff 100%) !important;
    padding-bottom: 1rem !important;
}
.hero-bg-gradient{
    filter: blur(100px);
    opacity: .34;
    z-index: 0;
    background: linear-gradient(146deg, #ffb33300 0%, #ece677a3 64%, #c9ff8500 81%);
    border-radius: 1106px;
    flex-flow: row;
    flex: none;
    place-content: center;
    align-items: center;
    gap: 10px;
    width: 82%;
    height: 953px;
    padding: 0;
    display: flex;
    position: absolute;
    bottom: 152px;
    left: 7.25694%;
    overflow: visible;
    box-shadow: 0 0 #fff;
}

/* --- Hero floating annotations --- */
.hero-annotations {
    display: block !important;
    position: relative;
    width: 100%;
    height: 0;
    pointer-events: none;
}
.hero-cursor {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    z-index: 5;
}
.hero-cursor-charles {
    animation: floatCharles 10s ease-in-out infinite;
}
.hero-cursor-you {
    animation: floatYou 10s ease-in-out infinite;
    animation-delay: -1.5s;
}
@keyframes floatCharles {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(3px, -4px); }
    50% { transform: translate(-2px, -7px); }
    75% { transform: translate(4px, -3px); }
}
@keyframes floatYou {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-3px, -5px); }
    50% { transform: translate(2px, -3px); }
    75% { transform: translate(-2px, -6px); }
}
.hero-cursor-icon {
    flex-shrink: 0;
    width: 18px;
    height: auto;
    margin-top: -15px;
}
.hero-cursor-label {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px 8px 8px 2px;
    white-space: nowrap;
    line-height: 1.3;
}
.br-top-left{
    border-radius: 8px 2px 8px 8px;
}
.br-top-right{
    border-radius: 2px 8px 8px 8px;
}
.hero-cursor-charles {
    top: -170px;
    left: 5%;
}
.hero-cursor-you {
    top: -240px;
    right: 5%;
}
.hero-note {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero-note-left {
    top: -2px;
    left: -8%;
}
.hero-note-left .hero-note-arrow {
    animation: nudgeRight 2s ease-in-out infinite;
}
.hero-note-right {
    top: 3px;
    right: -8%;
}
.hero-note-right .hero-note-arrow {
    animation: nudgeLeft 2s ease-in-out infinite;
}
@keyframes nudgeRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}
@keyframes nudgeLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}
@media (max-width: 768px) {
    .hero-annotations {
        display: none !important;
    }
}

/* --- Hero buttons: yellow primary, white secondary --- */
.hero-section .btn-primary {
    background: var(--accent) !important;
    color: var(--ink) !important;
    padding: 16px 36px !important;
    font-size: 16px !important;
}
.hero-section .btn-primary:hover {
    background: #f5cc5a !important;
}
.hero-section .btn-secondary {
    background: var(--canvas) !important;
    color: var(--ink) !important;
    border: none !important;
    padding: 16px 36px !important;
    font-size: 16px !important;
}
.hero-section .btn-secondary:hover {
    background: #F8F4F1 !important;
}

/* --- Marquee logos: vertical dividers between items --- */
.marquee-track {
    gap: 0 !important;
    padding-right: 0 !important;
}
.marquee-track span {
    position: relative !important;
    padding: 0 28px !important;
}
.marquee-track span::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: var(--divider);
}

/* --- Trusted-by line: use heading font, not handwriting --- */
.marquee-section-label,
section > div > p.font-hand {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--ink) !important;
}

/* --- Stats section: tight padding --- */
section:has(.stats-bar) {
    padding: 2rem 0 0 !important;
}
/* --- Stats bar: cream background --- */
.stats-bar {
    background: #F8F4F1 !important;
    border: 2px solid #f9f4f2 !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
}
.stats-bar .font-heading {
    font-weight: 700 !important;
}

/* --- Before/After comparison cards --- */
.compare-section p.font-hand {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: -0.02em !important;
}
.compare-section .compare-before {
    background: var(--canvas) !important;
    border: 2px solid #f9f4f2 !important;
    border-radius: 24px !important;
}
.compare-section .compare-after {
    background: #F8F4F1 !important;
    border: none !important;
    border-radius: 24px !important;
}

/* --- Buttons: pill-shaped, no shadows --- */
.btn-primary {
    background: var(--ink) !important;
    color: var(--canvas) !important;
    border-radius: 100px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    padding: 12px 30px !important;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease !important;
}
.btn-primary:hover {
    background: var(--accent) !important;
    color: var(--ink) !important;
    transform: translateY(-2px) !important;
}
.btn-primary.sm {
    border-radius: 100px !important;
    padding: 10px 18px !important;
}
.btn-secondary {
    border-radius: 100px !important;
    border: 1px solid rgba(69, 65, 64, 0.5) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    padding: 12px 30px !important;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;
}
.btn-secondary:hover {
    background: var(--section-alt-bg) !important;
    transform: translateY(-2px) !important;
}

/* --- Badges: colored bg, rotation, flat --- */
.badge {
    background: var(--accent) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 2px 16px !important;
    transform: rotate(-3deg);
    animation: badgeFloat1 3s ease-in-out infinite;
}
/* Tilt variants via nth-child */
.badge:nth-child(odd) {
    transform: rotate(4deg) !important;
    animation-name: badgeFloat2 !important;
}
.badge:nth-child(even) {
    transform: rotate(-3deg) !important;
    animation-name: badgeFloat1 !important;
}
/* Third variant for parent-level alternation */
section:nth-of-type(3n) .badge {
    transform: rotate(6deg) !important;
    animation-name: badgeFloat3 !important;
}
section:nth-of-type(3n+1) .badge {
    transform: rotate(-4deg) !important;
    animation-name: badgeFloat1 !important;
}
section:nth-of-type(3n+2) .badge {
    transform: rotate(3deg) !important;
    animation-name: badgeFloat2 !important;
}
@keyframes badgeFloat1 {
    0%, 100% { transform: rotate(-4deg) translate(0, 0); }
    50% { transform: rotate(-4deg) translate(5px, -4px); }
}
@keyframes badgeFloat2 {
    0%, 100% { transform: rotate(3deg) translate(0, 0); }
    50% { transform: rotate(3deg) translate(-5px, -4px); }
}
@keyframes badgeFloat3 {
    0%, 100% { transform: rotate(6deg) translate(0, 0); }
    50% { transform: rotate(6deg) translate(4px, -3px); }
}
.badge svg {
    color: var(--ink) !important;
}

/* --- Hero badge: flat pill --- */
.hero-badge {
    background: var(--canvas) !important;
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
}
.hero-badge-inner {
    background: var(--canvas) !important;
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}

/* --- Pulse dot: use accent color --- */
.pulse {
    background: var(--accent) !important;
}

/* --- Popular badge: dark pill, distinct from plan name --- */
.popular-badge {
    background: var(--ink) !important;
    color: var(--canvas) !important;
    box-shadow: none !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    padding: 3px 12px !important;
    transform: rotate(3deg) !important;
}

/* --- Feature page nav tabs --- */
.feature-nav {
    background: var(--section-alt-bg) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 100px !important;
    padding: 6px !important;
}
.feature-nav-link {
    border-radius: 100px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.feature-nav-link.active {
    background: var(--accent) !important;
    color: var(--ink) !important;
}
.feature-nav-link:not(.active):hover {
    background: rgba(18, 10, 11, 0.06) !important;
}

/* --- Icon feature blocks: flat solid bg --- */
/* Icon feature: colorful backgrounds per position */
.icon-feature {
    background: #FFD86F !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    color: var(--ink) !important;
}
.icon-feature svg {
    color: var(--ink) !important;
}
/* Shuffled icon colors per card position */
.grid > .neu:nth-child(1) .icon-feature { background: #FFD86F !important; }
.grid > .neu:nth-child(2) .icon-feature { background: #C9FF85 !important; }
.grid > .neu:nth-child(3) .icon-feature { background: #CCBDF4 !important; }
.grid > .neu:nth-child(4) .icon-feature { background: #C9FF85 !important; }
.grid > .neu:nth-child(5) .icon-feature { background: #CCBDF4 !important; }
.grid > .neu:nth-child(6) .icon-feature { background: #FFD86F !important; }
.grid > .neu:nth-child(7) .icon-feature { background: #CCBDF4 !important; }
.grid > .neu:nth-child(8) .icon-feature { background: #FFD86F !important; }
.grid > .neu:nth-child(9) .icon-feature { background: #C9FF85 !important; }
.grid > .neu:nth-child(10) .icon-feature { background: #FFD86F !important; }
.grid > .neu:nth-child(11) .icon-feature { background: #C9FF85 !important; }
.grid > .neu:nth-child(12) .icon-feature { background: #CCBDF4 !important; }

/* Cards in grid sections: cream background */
section > div > .grid > .neu {
    background: #F8F4F1 !important;
    border: none !important;
}

/* --- Module cards: flat borders only --- */
.module-card,
.module-card:hover {
    background: var(--canvas) !important;
    box-shadow: none !important;
    border: 2px solid #f9f4f2 !important;
    border-radius: 20px !important;
    padding: 24px !important;
}
.module-card .module-icon {
    box-shadow: none !important;
    border-radius: 14px !important;
}
.module-card:nth-child(1) .module-icon { background: #CCBDF4 !important; }
.module-card:nth-child(2) .module-icon { background: #FFD86F !important; }
.module-card:nth-child(3) .module-icon { background: #C9FF85 !important; }
.module-card:nth-child(4) .module-icon { background: #C9FF85 !important; }
.module-card:nth-child(5) .module-icon { background: #CCBDF4 !important; }
.module-card:nth-child(6) .module-icon { background: #FFD86F !important; }
.module-card:nth-child(7) .module-icon { background: #FFD86F !important; }
.module-card:nth-child(8) .module-icon { background: #C9FF85 !important; }
.module-card:nth-child(9) .module-icon { background: #CCBDF4 !important; }
.module-card:nth-child(10) .module-icon { background: #CCBDF4 !important; }
.module-card:nth-child(11) .module-icon { background: #FFD86F !important; }
.module-card:nth-child(12) .module-icon { background: #C9FF85 !important; }
.module-card:nth-child(13) .module-icon { background: #C9FF85 !important; }
.module-card:nth-child(14) .module-icon { background: #CCBDF4 !important; }
.module-card:nth-child(15) .module-icon { background: #FFD86F !important; }
.module-card .module-icon svg {
    color: var(--ink) !important;
}
.module-card .module-title {
    font-weight: 700 !important;
}
.module-card .module-desc {
    font-weight: 500 !important;
    color: var(--muted) !important;
}

/* --- Integration tiles: flat --- */
.integration-tile,
.integration-tile:hover {
    background: var(--canvas) !important;
    box-shadow: none !important;
    border: 2px solid #f9f4f2 !important;
    border-radius: 16px !important;
}
.integration-name {
    font-weight: 600 !important;
}
.integration-cat {
    font-weight: 500 !important;
}

/* --- Mobile menu: flat --- */
#mobile-menu.mobile-menu {
    background: var(--canvas) !important;
    border-left: 2px solid #f9f4f2 !important;
}
[dir="rtl"] #mobile-menu.mobile-menu {
    border-left: none !important;
    border-right: 2px solid #f9f4f2 !important;
}
#mobile-menu .neu-subtle {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    background: var(--canvas) !important;
}
#nav-close.neu-subtle {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    background: var(--canvas) !important;
}
.mob-link {
    color: var(--ink) !important;
    font-weight: 600 !important;
}
.mob-link:hover {
    background: var(--section-alt-bg) !important;
}
#mobile-menu .btn-primary {
    background: var(--accent) !important;
    color: var(--ink) !important;
    border-radius: 100px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* --- Footer social icons: flat --- */
.footer-social {
    background: var(--footer-gradient-start) !important;
    box-shadow: none !important;
}

/* --- Price toggle: warm cream bg, no shadow --- */
.price-toggle {
    background: var(--section-alt-bg) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 100px !important;
}
.price-toggle button {
    border-radius: 100px !important;
}
.price-toggle button.active {
    box-shadow: none !important;
    background: var(--accent) !important;
    border: none !important;
    color: var(--ink) !important;
}

/* --- Currency select: flat --- */
.currency-select {
    border: 1px solid var(--card-border) !important;
    box-shadow: none !important;
    border-radius: 100px !important;
}

/* --- Tab bar: cream container, white active pill --- */
.neu-subtle:has(.tab-btn) {
    background: #F8F4F1 !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 4px !important;
}
.tab-btn.neu-subtle {
    box-shadow: none !important;
    border: none !important;
    background: var(--accent) !important;
    border-radius: 100px !important;
}
.tab-btn {
    border-radius: 100px !important;
    transition: background 0.2s ease !important;
}
.tab-btn:not(.neu-subtle) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.tab-btn:hover:not(.neu-subtle) {
    background: rgba(18,10,11,0.08) !important;
}

/* --- Tab panel: cream background --- */
.tab-panel.neu {
    background: #F8F4F1 !important;
    border: none !important;
    border-radius: 24px !important;
}
/* Feature list items inside tabs */
.tab-panel .neu-subtle {
    background: var(--canvas) !important;
    border: none !important;
    border-radius: 16px !important;
}
/* Tab panel icons: colorful per row */
.tab-panel .space-y-4 > div:nth-child(1) .icon-feature {
    background: #C9FF85 !important;
}
.tab-panel .space-y-4 > div:nth-child(2) .icon-feature {
    background: #FFD86F !important;
}
.tab-panel .space-y-4 > div:nth-child(3) .icon-feature {
    background: #7CE1FF !important;
}
.tab-panel .space-y-4 .icon-feature svg {
    color: var(--ink) !important;
}
/* Right side mock UI */
.tab-panel .neu.rounded-\[16px\] {
    background: var(--canvas) !important;
    border: none !important;
}

/* --- Check stars: pill-shaped, yellow accent bg --- */
.check-star {
    border-radius: 100px !important;
    background: var(--accent) !important;
}
.check-star svg {
    color: var(--ink) !important;
}

/* --- Compare toggle button: cream pill --- */
#compareToggle {
    border-radius: 100px !important;
    box-shadow: none !important;
    border: 2px solid #f9f4f2 !important;
    background: var(--canvas) !important;
}

/* --- Comparison table wrapper: flat with border --- */
#compareCollapse .neu {
    box-shadow: none !important;
    border: 2px solid #f9f4f2 !important;
    background: var(--canvas) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
#compareCollapse .compare-wrap {
    background: transparent !important;
    border-radius: 0 !important;
}

/* --- Comparison table: clean flat --- */
.compare-table {
    border-spacing: 0 !important;
}
.compare-table .check {
    background: var(--accent) !important;
    color: var(--ink) !important;
}
.compare-table th,
.compare-table td {
    border-bottom: 2px solid #f9f4f2 !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
}
/* Last row: no bottom border */
.compare-table tbody tr:last-child td {
    border-bottom: none !important;
}
/* Growth column cream bg */
.compare-table th:nth-child(4),
.compare-table td:nth-child(4) {
    background: var(--section-alt-bg) !important;
}
/* Heading row */
.compare-table thead th {
    padding: 20px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-bottom: 2px solid #f9f4f2 !important;
}
/* Sticky first col white */
.compare-table th:first-child,
.compare-table td:first-child {
    background: var(--canvas) !important;
    text-align: left !important;
    color: var(--muted) !important;
}
.compare-table thead th:first-child {
    color: var(--ink) !important;
}
/* Dash styling: softer */
.compare-table .dash {
    color: #D0CFCF !important;
}
/* Compare table text: boost weight */
.compare-table td {
    font-weight: 500 !important;
}
.compare-table thead th {
    font-weight: 600 !important;
}

/* --- Contact input: flat --- */
.contact-input {
    box-shadow: none !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 16px !important;
}
.contact-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(255,216,111,0.2) !important;
}
.contact-input.is-error {
    border-color: var(--error-accent) !important;
    box-shadow: none !important;
}
.contact-input.is-error:focus {
    box-shadow: 0 0 0 4px rgba(224,69,69,0.15) !important;
}

/* --- Form alerts & field errors: flat --- */
.form-alert {
    border-radius: 16px !important;
    box-shadow: none !important;
}
.form-alert.success {
    background: var(--success-bg) !important;
    border: 2px solid var(--success-border) !important;
    color: var(--success-text) !important;
}
.form-alert.error {
    background: var(--error-bg) !important;
    border: 2px solid var(--error-border) !important;
    color: var(--error-text) !important;
}
.field-error {
    color: var(--field-error) !important;
    font-weight: 600 !important;
}

/* --- Social buttons: flat --- */
.social-btn,
.social-btn:hover {
    box-shadow: none !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 100px !important;
    transform: none !important;
}

/* --- FAQ toggle --- */
.faq-toggle {
    background: var(--ink) !important;
}

/* --- Testimonial dots --- */
.t-dot {
    background: var(--dot-inactive) !important;
}
.t-dot.active {
    background: var(--dot-active) !important;
}

/* --- Orbit section: flatten glass bowl to warm geometry --- */
#integrations .rounded-full {
    background: none !important;
    box-shadow: none !important;
    border: 2px solid #f9f4f2 !important;
}
/* Orbit tiles: flat, cream border */
.orbit-tile .neu {
    box-shadow: none !important;
    border: 2px solid #f9f4f2 !important;
    background: var(--canvas) !important;
}
/* Orbit center logo + inner: flat */
#integrations .absolute > div[style*="border-radius"] {
    box-shadow: none !important;
    border: 2px solid #f9f4f2 !important;
}
#integrations .absolute > div[style*="border-radius"] > div {
    box-shadow: none !important;
}
/* Remove purple drop-shadow from orbit icons */
.orbit-tile svg,
#integrations svg {
    filter: none !important;
}
/* Orbit tooltip: flat */
.orbit-tile [data-tip]::after {
    background: var(--ink) !important;
    box-shadow: none !important;
}

/* --- Section spacing: tighter for geometry --- */
section.py-24 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
section[class*="lg:py-[96px]"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
section[class*="lg:py-[120px]"] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

/* --- Hero screenshot container: larger radius, cream border --- */
.hero-tilt .neu {
    border-radius: 24px !important;
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
}

/* --- Testimonial slider cards --- */
.t-slide.neu {
    border: 2px solid #f9f4f2 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    background: var(--canvas) !important;
}
/* Stars: yellow accent */
.t-slide svg[fill="currentColor"] {
    color: var(--accent) !important;
}
/* Avatar initials: colorful backgrounds cycling */
.t-slide .neu-subtle.rounded-full {
    box-shadow: none !important;
    border: none !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
}
.t-slide:nth-child(3n+1) .neu-subtle.rounded-full {
    background: var(--accent) !important;
}
.t-slide:nth-child(3n+2) .neu-subtle.rounded-full {
    background: #C9FF85 !important;
}
.t-slide:nth-child(3n+3) .neu-subtle.rounded-full {
    background: #7CE1FF !important;
}
/* Divider line: cream */
.t-slide .border-divider {
    border-color: #f9f4f2 !important;
}
/* Testimonial dots: accent active */
.t-dot.active {
    background: var(--ink) !important;
}

/* --- FAQ items: flat --- */
.faq-item .neu-subtle {
    border-radius: 20px !important;
}

/* --- Footer: full-width, no rounded corners --- */
footer > div {
    max-width: 100% !important;
    padding: 0 !important;
}
footer .mx-5 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    padding-left: max(2rem, calc((100vw - 1080px) / 2 + 2rem)) !important;
    padding-right: max(2rem, calc((100vw - 1080px) / 2 + 2rem)) !important;
}
/* Footer links: lighter for readability */
footer a.text-dim {
    color: rgba(255,255,255,0.6) !important;
}
footer a.text-dim:hover {
    color: #FFFFFF !important;
}

/* --- Badge color variants (per-section multi-color) --- */
.badge-green {
    background: #C9FF85 !important;
    color: var(--ink) !important;
}
.badge-green svg {
    color: var(--ink) !important;
}
.badge-blue {
    background: #7CE1FF !important;
    color: var(--ink) !important;
}
.badge-blue svg {
    color: var(--ink) !important;
}
.badge-purple {
    background: #9886FE !important;
    color: var(--ink) !important;
}
.badge-purple svg {
    color: var(--ink) !important;
}
.badge-white {
    background: var(--canvas) !important;
    color: var(--ink) !important;
    border: 1px solid var(--card-border) !important;
}
.badge-white svg {
    color: var(--ink) !important;
}
.badge-gray {
    background: #F0ECE7 !important;
    color: var(--ink) !important;
    border-color: var(--card-border) !important;
}

/* --- Pricing cards: cream outer shell with white inner --- */
#planGrid > div.neu {
    border: none!important;
    border-radius: 28px !important;
    box-shadow: none !important;
    padding: 28px !important;
}
#planGrid > div.neu .price-card-price-wrapper {
    border-radius: 28px;
    background: #FFFFFF;
    padding: 20px;
    margin-bottom: 28px;
}
#planGrid > div.neu .price-card-price-wrapper .bg-divider{
    display: none;
}
#planGrid > div.neu .price-card-price-wrapper .price-note{
    margin-bottom: 0 !important;
}

/* Plan name as yellow pill badge */
#planGrid .plan-name {
    align-self: flex-start !important;
    background: var(--accent) !important;
    padding: 4px 16px !important;
    border-radius: 100px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    transform: none !important;
    display: inline-block;
}

/* All check-stars yellow in pricing */
#planGrid .check-star {
    background: var(--accent) !important;
}
#planGrid .check-star svg {
    color: var(--ink) !important;
}

/* Pricing buttons: full-width pill */
#planGrid .btn-primary,
#planGrid .btn-secondary {
    border-radius: 100px !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Popular badge: positioned nicely */
#planGrid .popular-badge {
    top: -10px !important;
    right: 16px !important;
}

/* Pricing card text: boost weight and size */
#planGrid p {
    font-weight: 500 !important;
}
#planGrid li {
    font-weight: 500 !important;
    font-size: 14px !important;
}
#planGrid .price-amount {
    font-weight: 700 !important;
}
#planGrid .btn-primary,
#planGrid .btn-secondary {
    font-weight: 600 !important;
    font-size: 15px !important;
}

/* --- "Save 20%" label: purple --- */
.save-label {
    color: #5952FF !important;
}

/* --- CTA section wrapper: tight top padding --- */
section:has(.cta-section) {
    padding-top: 2rem !important;
}
/* --- CTA section: yellow background with geometry --- */
.cta-section {
    background: #FFD86F !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 40px !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Geometry float animations */
@keyframes geo-float-left {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(8px, -12px) rotate(5deg); }
}
@keyframes geo-float-right {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-8px, -10px) rotate(-5deg); }
}
/* Geometric shapes - left side */
.cta-section::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -20px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        /* Large circle — top left */
        radial-gradient(circle 60px at 80px 50px, transparent 58px, rgba(255,255,255,0.25) 58px, rgba(255,255,255,0.25) 60px, transparent 60px),
        /* Small filled circle — bottom left */
        radial-gradient(circle 12px at 60px calc(100% - 40px), rgba(255,255,255,0.3) 12px, transparent 12px),
        /* Square — rotated, left */
        linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.2) 75%);
    background-size: 100% 100%, 100% 100%, 28px 28px;
    background-position: 0 0, 0 0, 140px 30px;
    background-repeat: no-repeat, no-repeat, no-repeat;
    animation: geo-float-left 8s ease-in-out infinite;
}
/* Geometric shapes - right side */
.cta-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        /* Triangle — top right (using clip-path workaround with conic) */
        radial-gradient(circle 8px at calc(100% - 60px) calc(100% - 50px), rgba(255,255,255,0.3) 8px, transparent 8px),
        /* Ring — right */
        radial-gradient(circle 40px at calc(100% - 70px) 55px, transparent 36px, rgba(255,255,255,0.2) 36px, rgba(255,255,255,0.2) 40px, transparent 40px),
        /* Dots — scattered */
        radial-gradient(circle 5px at calc(100% - 160px) 35px, rgba(255,255,255,0.3) 5px, transparent 5px),
        radial-gradient(circle 4px at calc(100% - 140px) calc(100% - 35px), rgba(255,255,255,0.25) 4px, transparent 4px),
        /* Cross — bottom right */
        linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)),
        linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25));
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        20px 3px,
        3px 20px;
    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        calc(100% - 170px) calc(100% - 55px),
        calc(100% - 161px) calc(100% - 64px);
    background-repeat: no-repeat;
    animation: geo-float-right 10s ease-in-out infinite;
}
.cta-section .badge {
    background: var(--canvas) !important;
    border: 1px solid var(--card-border) !important;
}
.cta-section .h2,
.cta-section .h-grad {
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
}
.cta-section .btn-primary {
    background: var(--ink) !important;
    color: var(--canvas) !important;
}
.cta-section .btn-secondary {
    border: none !important;
    background: var(--canvas) !important;
    color: var(--ink) !important;
}
.cta-section p {
    color: var(--ink) !important;
}

/* --- FAQ items: cream closed, white open, more spacing --- */
.faq-item.neu {
    background: #F8F4F1 !important;
    border: none !important;
    border-radius: 20px !important;
    margin-bottom: 8px !important;
}
.faq-item.open.neu {
    background: var(--canvas) !important;
    border: 2px solid #f9f4f2 !important;
}

/* --- Policy page TOC and prose (legal pages) --- */
.policy-prose a {
    color: var(--ink) !important;
    text-decoration-color: var(--accent) !important;
}
.policy-toc a.active {
    color: var(--ink) !important;
}
/* Legal article card: flat with cream border */
.policy-prose {
    font-weight: 500 !important;
}
article.neu {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 24px !important;
}
/* Policy TOC sidebar: flat */
.policy-toc {
    border: none !important;
}
.policy-toc a {
    font-weight: 500 !important;
}

/* --- Contact page: info bar + form card --- */
/* Form card */
#contactForm {
    font-weight: 500 !important;
}
section .neu:has(#contactForm) {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 24px !important;
}
#contactForm .btn-primary {
    background: var(--accent) !important;
    color: var(--ink) !important;
    padding: 16px 36px !important;
    font-size: 16px !important;
}
#contactForm .btn-primary:hover {
    background: #f5cc5a !important;
}
/* Contact inputs */
.contact-input {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
}
.contact-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(255,216,111,0.15) !important;
}
/* Map border */
iframe[title="Office location"] {
    border: 2px solid #f9f4f2 !important;
}
/* Map container */
.rounded-\[16px\]:has(iframe) {
    border: 2px solid #f9f4f2 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}
/* Contact info bar: white card with cream border */
.contact-info-bar {
    background: var(--canvas) !important;
    border: 2px solid #f9f4f2 !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
}
.contact-info-bar .text-white,
.contact-info-bar .text-white\/90 {
    color: var(--ink) !important;
}
.contact-info-bar [style*="color: var(--footer-text)"] {
    color: var(--muted) !important;
}
.contact-info-bar [style*="background: rgba(255,255,255,0.06)"] {
    background: var(--section-alt-bg) !important;
    border-radius: 12px !important;
}
.contact-info-bar > div:nth-child(1) [style*="background: rgba(255,255,255,0.06)"] {
    background: #FFD86F !important;
}
.contact-info-bar > div:nth-child(2) [style*="background: rgba(255,255,255,0.06)"] {
    background: #C9FF85 !important;
}
.contact-info-bar > div:nth-child(3) [style*="background: rgba(255,255,255,0.06)"] {
    background: #CCBDF4 !important;
}
.contact-info-bar svg {
    color: var(--ink) !important;
}

/* --- Signup page: social buttons + form --- */
.social-btn {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
}
.social-btn:hover {
    background: #F8F4F1 !important;
    box-shadow: none !important;
}
/* Or-divider */
.or-divider span {
    font-weight: 500 !important;
}
/* My Account button */
a.neu-subtle:has(.rounded-full) {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 100px !important;
}
a.neu-subtle .rounded-full {
    background: var(--accent) !important;
    color: var(--ink) !important;
}
/* Signup form button: yellow like hero */
#signupForm .btn-primary {
    background: var(--accent) !important;
    color: var(--ink) !important;
    padding: 16px 36px !important;
    font-size: 16px !important;
}
#signupForm .btn-primary:hover {
    background: #f5cc5a !important;
}

/* --- Currency select on pricing page --- */
.currency-select {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 100px !important;
    font-weight: 500 !important;
}

/* --- Features page: module cards flat --- */
.module-card {
    border: 2px solid #f9f4f2 !important;
    box-shadow: none !important;
    border-radius: 20px !important;
}
.module-card:hover {
    box-shadow: none !important;
}

/* Nav dropdown */
.nav-dropdown-menu {
    background: #FFFFFF !important;
    border: 2px solid #F8F4F1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.nav-dropdown-menu a { color: #1F2937 !important; border-radius: 8px !important; }
.nav-dropdown-menu a:hover { background: #F8F4F1 !important; }
.nav-dropdown-toggle { color: var(--ink) !important; }
.mob-accordion-toggle { color: var(--ink) !important; }
.mob-accordion-body a { color: var(--muted) !important; }
.mob-accordion-body a:hover { color: var(--ink) !important; }