/* EventiX — application and marketing only. Invitations have their own stylesheet. */
:root {
    --ink: #14243e;
    --muted: #5b6b82;
    --paper: #f5f8fc;
    --surface: #ffffff;
    --line: #e2e8f0;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --soft: #eff6ff;
    --navy: #10274c;
    --cyan: #0891b2;
    --shadow: 0 8px 32px rgb(15 38 76 / .045);
}
html { scroll-padding-top: 110px; }
body { background: var(--paper); color: var(--ink); font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .font-serif { font-family: 'Figtree', system-ui, sans-serif; letter-spacing: -.035em; }
::selection { background: #dbeafe; color: #1e3a8a; }
:focus-visible { outline: 3px solid #3b82f6; outline-offset: 4px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .55; }
.btn-primary, .btn-secondary { min-height: 44px; line-height: 1.4; text-align: center; }
.btn-primary { box-shadow: 0 4px 10px rgb(37 99 235 / .16); }
.btn-primary:hover { box-shadow: 0 6px 18px rgb(37 99 235 / .22); }
.card, .card-glass, .stat-card { box-shadow: var(--shadow); }
.stat-card { padding: 24px; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 24px; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.stat-card .font-bold { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.input-field, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]), select, textarea {
    min-height: 46px; border-radius: 12px; border-color: #cbd5e1; background-color: white; color: var(--ink); box-shadow: none;
}
input::placeholder, textarea::placeholder { color: #718096; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); --tw-ring-color: rgb(37 99 235 / .25); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.skip-link { position: fixed; top: -90px; left: 20px; z-index: 100; padding: 12px 20px; border-radius: 10px; background: white; color: var(--accent); box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }

/* Workspace: a quiet white canvas and a navy navigation rail. */
.workspace-sidebar, .workspace-drawer { background: var(--navy); }
.workspace-main { min-width: 0; }
.workspace-main > header { background: white; border-color: var(--line); }
.workspace-header-title { flex: 1; min-width: 0; }
.workspace-main > header h2 { color: var(--ink); font-size: 21px; }
.workspace-main main > div > .py-8 { padding-top: 0; padding-bottom: 0; }
.workspace-main main > div > .py-8 > div { padding-left: 0; padding-right: 0; max-width: none; }
.workspace-main main > div > .py-8 > div.bg-white { padding: 24px; }
.nav-link { min-height: 46px; border: 1px solid transparent; }
.nav-link-active { background: #2563eb; border-color: #3b82f6; box-shadow: 0 4px 16px rgb(0 0 0 / .1); }
.nav-link-active:hover { background: #1d4ed8; }
.nav-link svg { flex-shrink: 0; }
.nav-section { padding: 25px 15px 10px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: #91aacb; }
.nav-help { margin: 16px; padding: 18px; border: 1px solid #ffffff1a; border-radius: 16px; background: #ffffff08; color: #bbcde5; font-size: 12px; line-height: 1.7; }
.nav-help strong { display: block; color: white; font-size: 14px; margin-bottom: 6px; }
.nav-help a { display: inline-block; margin-top: 10px; color: #93c5fd; font-weight: 600; }
.nav-caption { margin-top: 16px; color: #a3bbdc; font-size: 10px; letter-spacing: .12em; }
.app-shell table { font-size: 13px; }
.app-shell thead { background: #f8fafc; }
.app-shell th { color: #52647d; font-size: 11px; font-weight: 700; letter-spacing: .065em; padding-top: 16px; padding-bottom: 16px; }
.app-shell td { padding-top: 17px; padding-bottom: 17px; }
.app-shell tbody tr { transition: background-color .15s; }
.app-shell tbody tr:hover { background: #f8fbff; }
.dashboard-hero { background: linear-gradient(110deg, #10274c, #174487); color: white; border: 1px solid #234d85; box-shadow: 0 12px 30px rgb(15 38 76 / .1); border-radius: 22px; }
.dashboard-hero h3 { color: white; font-weight: 600; }
.dashboard-hero p { color: #c6dbf8; }
.dashboard-hero::after { content: ''; position: absolute; right: -70px; top: -115px; width: 330px; height: 330px; border-radius: 50%; border: 1px solid #ffffff20; box-shadow: 0 0 0 42px #ffffff05, 0 0 0 84px #ffffff04; pointer-events: none; }
.dashboard-hero > .relative { z-index: 1; }
.workspace-bar { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.workspace-bar span { width: 7px; height: 7px; border-radius: 50%; background: #059669; }

/* Landing page. */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 25px; line-height: 1.2; font-weight: 700; letter-spacing: -1px; color: var(--ink); }
.brand-mark {
    position: relative;
    display: grid; place-items: center; flex-shrink: 0;
    width: 37px; height: 37px; border-radius: 12px;
    background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
    box-shadow: 0 4px 14px rgb(37 99 235 / .22), inset 0 0 0 1px rgb(255 255 255 / .16);
    color: white;
}
.brand-loupe {
    position: absolute; top: -4px; right: -4px;
    width: 17px; height: 17px; flex-shrink: 0;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / .28));
}
.brand-letters {
    font: 800 14px/1.05 'Figtree', Arial, sans-serif;
    letter-spacing: 0;
}
.landing-page { background: white; }
.landing-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 32px; }
.landing-top { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / .95); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.landing-nav { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.landing-nav .brand { flex-shrink: 0; }
.landing-nav-links { display: flex; gap: 28px; font-size: 13px; color: var(--muted); }
.landing-nav-links a:hover, .landing-footer a:hover { color: var(--accent); }
.landing-actions { display: flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 600; }
.landing-menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; align-items: center; justify-content: center; }
.landing-mobile-nav { border-top: 1px solid var(--line); padding: 12px 24px 20px; }
.landing-mobile-nav a { display: block; padding: 12px; color: var(--muted); font-size: 14px; }
.landing-hero { padding: 86px 0 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.landing-hero > div { min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #1d4ed8; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #3b82f6; }
.landing-hero .eyebrow { padding: 9px 12px; background: var(--soft); border: 1px solid #dbeafe; border-radius: 30px; letter-spacing: .07em; }
.landing-hero h1 { font-size: clamp(44px, 5.25vw, 70px); line-height: 1.075; letter-spacing: -.055em; font-weight: 600; margin: 24px 0; }
.landing-hero h1 em { color: var(--accent); font-style: normal; }
.landing-hero .lead { max-width: 460px; margin-bottom: 30px; font-size: 17px; line-height: 1.85; color: var(--muted); }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { display: flex; gap: 9px; align-items: center; margin-top: 20px; font-size: 12px; color: var(--muted); }
.hero-note span { color: #047857; }
.preview-stage { position: relative; isolation: isolate; padding: 27px 22px 48px; border-radius: 28px; background: linear-gradient(140deg, #eff6ff, #e0edff 65%, #e0f2fe); border: 1px solid #d9e7fb; }
.preview-stage::before { content: ''; position: absolute; z-index: -1; inset: -24px -15px 20px 25px; border-radius: 36px; border: 1px dashed #bfdbfe; transform: rotate(5deg); }
.preview-label { color: #43618b; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.preview-window { background: white; border: 1px solid #dbe4f0; border-radius: 16px; box-shadow: 0 24px 50px rgb(30 64 175 / .12); overflow: hidden; }
.preview-top { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 5px; font-size: 10px; color: #60728b; background: #f8fafc; }
.preview-top i { width: 7px; height: 7px; background: #cbd5e1; border-radius: 50%; }
.preview-top i:first-child { background: #fca5a5; }
.preview-top i:nth-child(2) { background: #fcd34d; }
.preview-top i:nth-child(3) { background: #6ee7b7; }
.preview-top span { margin-left: auto; }
.preview-body { padding: 24px; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.preview-heading h3 { font-size: 25px; font-weight: 600; }
.preview-heading small { color: var(--muted); font-size: 9px; letter-spacing: .03em; }
.preview-badge { padding: 5px 9px; background: #eff6ff; color: #1d4ed8; border-radius: 20px; font-size: 9px; white-space: nowrap; }
.preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0; }
.preview-stats > div { padding: 14px 10px; border-radius: 12px; background: #eff6ff; }
.preview-stats > div:nth-child(2) { background: #ecfdf5; }
.preview-stats > div:nth-child(3) { background: #f5f3ff; }
.preview-stats strong { display: block; font-size: 28px; letter-spacing: -.04em; }
.preview-stats small { color: #52647d; font-size: 9px; }
.preview-list-title { font-size: 11px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; }
.preview-list-title span { color: var(--accent); }
.preview-row { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #edf2f7; font-size: 11px; }
.preview-avatar { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; border-radius: 50%; background: #e0e7ff; color: #4338ca; font-size: 10px; }
.preview-row small { color: #047857; font-size: 9px; margin-left: auto; }
.preview-floating { position: absolute; right: 12px; bottom: -15px; padding: 14px 20px; background: white; border: 1px solid #dbeafe; color: #1e40af; border-radius: 14px; box-shadow: 0 10px 24px rgb(30 64 175 / .1); font-size: 12px; }
.feature-strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 26px 0; border-block: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.feature-strip span { display: flex; gap: 9px; align-items: center; }
.feature-strip b { color: #2563eb; font-size: 19px; font-weight: 400; }
.landing-section { padding: 90px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.section-heading h2, .landing-cta h2 { margin-top: 16px; font-size: clamp(32px, 4vw, 46px); line-height: 1.15; font-weight: 600; }
.section-heading > p { max-width: 330px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card { padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: white; transition: transform .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-card:first-child { background: #eff6ff; border-color: #dbeafe; }
.feature-card:nth-child(2) .feature-icon { background: #ecfeff; color: #0e7490; }
.feature-card:nth-child(3) .feature-icon { background: #f5f3ff; color: #6d28d9; }
.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #dbeafe; color: #1d4ed8; font-size: 24px; }
.feature-card h3 { font-size: 23px; font-weight: 600; margin: 30px 0 12px; }
.feature-card p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.steps-section { padding-top: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.step-number { border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 20px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .07em; }
.steps h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.landing-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 50px; margin-bottom: 70px; border-radius: 26px; background: var(--navy); color: white; }
.landing-cta .eyebrow { color: #93c5fd; }
.landing-cta p { margin-top: 16px; color: #b7cce8; font-size: 14px; }
.landing-cta .btn-primary { background: white; border-color: white; color: #1d4ed8; flex-shrink: 0; }
.landing-cta .btn-primary:hover { background: #eff6ff; }
.landing-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* Authentication and scanner access. */
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-story { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 60px; background: linear-gradient(150deg, #10274c, #163a72 65%, #075985); color: white; }
.auth-story::after { content: ''; position: absolute; z-index: -1; width: 480px; height: 480px; right: -200px; bottom: -120px; border: 1px solid #ffffff22; border-radius: 50%; box-shadow: 0 0 0 70px #ffffff06, 0 0 0 140px #ffffff04; }
.auth-story .brand { color: white; }
.auth-story h1 { max-width: 480px; font-size: clamp(40px, 4.7vw, 64px); font-weight: 600; line-height: 1.1; }
.auth-story h1 span { color: #7dd3fc; }
.auth-story p { max-width: 370px; margin-top: 24px; color: #c2d5ef; font-size: 15px; line-height: 1.85; }
.auth-art {
    position: relative;
    display: grid; place-items: center;
    width: 96px; height: 96px; border: 1px solid #ffffff26;
    border-radius: 28px;
    background: radial-gradient(circle at 30% 22%, #2563EB, #1E40AF 58%, #10274C);
    color: white; margin: 40px 0 30px;
    box-shadow: 0 12px 36px rgb(13 51 139 / .35);
}
.auth-art .brand-loupe { width: 36px; height: 36px; }
.auth-art .brand-letters { font: 800 32px/1 'Figtree', Arial, sans-serif; }
.auth-story small { color: #aec9eb; font-size: 10px; letter-spacing: .12em; margin-top: 40px; }
.auth-main { display: flex; justify-content: center; align-items: center; padding: 48px 32px; background: white; }
.auth-form { width: 100%; max-width: 420px; }
.auth-form > .brand { display: none; }
.auth-heading { margin-bottom: 26px; }
.auth-heading h1 { font-size: 30px; font-weight: 600; }
.auth-heading p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.auth-support { padding-top: 24px; margin-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.8; }
.auth-support a { color: #1d4ed8; }
.auth-qr-white { color: #1e40af; }

@media (min-width: 1024px) {
    .workspace-sidebar { width: 272px; }
    .workspace-main { margin-left: 272px; }
    .workspace-main main { padding: 30px 32px; }
    .workspace-main main > div { padding: 0; max-width: 1280px; margin: auto; }
    .workspace-main footer { padding-right: 72px; }
}
@media (max-width: 1100px) {
    .landing-nav-links { gap: 16px; font-size: 12px; }
    .landing-hero { gap: 30px; }
    .auth-story { padding: 40px; }
}
@media (max-width: 1023px) {
    .landing-nav-links { display: none; }
    .landing-menu-button { display: inline-flex; }
    .workspace-bar { display: none; }
    .workspace-main { margin-left: 0; }
    .landing-hero { padding: 56px 0 64px; }
    .landing-hero h1 { font-size: 48px; }
    .preview-body { padding: 18px; }
    .preview-heading { flex-wrap: wrap; }
    .preview-heading h3 { font-size: 24px; }
}
@media (max-width: 760px) {
    .landing-wrap { padding-inline: 22px; }
    .landing-nav { min-height: 74px; gap: 10px; }
    .landing-actions { gap: 12px; }
    .landing-actions .btn-primary { padding: 10px 13px; font-size: 12px; }
    .landing-nav .brand { font-size: 22px; gap: 7px; }
    .landing-nav .brand-mark { width: 32px; height: 32px; }
    .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 42px 0 60px; }
    .landing-hero h1 { font-size: clamp(43px, 8.5vw, 62px); }
    .landing-hero .lead { font-size: 16px; }
    .preview-stage { max-width: 540px; width: 100%; justify-self: center; }
    .preview-stage::before { inset: -10px 4px 10px; transform: rotate(3deg); }
    .preview-heading { flex-wrap: nowrap; }
    .feature-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 11px; }
    .landing-section { padding: 56px 0; }
    .steps-section { padding-top: 0; }
    .section-heading { display: block; }
    .section-heading > p { margin-top: 18px; }
    .feature-grid, .steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .feature-card { padding: 26px; }
    .feature-card h3 { margin-top: 22px; }
    .steps { gap: 30px; }
    .landing-cta { padding: 32px; display: block; margin-bottom: 40px; }
    .landing-cta .btn-primary { margin-top: 26px; }
    .landing-footer { flex-direction: column; align-items: flex-start; }
    .auth-layout { grid-template-columns: minmax(0, 1fr); }
    .auth-story { display: none; }
    .auth-main { min-height: 100vh; padding: 36px 24px; }
    .auth-form > .brand { display: inline-flex; margin-bottom: 32px; }
    .stat-card { padding: 20px; }
    .workspace-main main { padding-top: 22px; }
}
@media (max-width: 420px) {
    .landing-wrap { padding-inline: 16px; }
    .landing-nav .brand { font-size: 20px; }
    .landing-actions > a:not(.btn-primary) { display: none; }
    .landing-actions { gap: 8px; }
    .landing-menu-button { width: 36px; height: 40px; }
    .preview-stage { padding: 20px 12px 40px; }
    .preview-body { padding: 16px; }
    .preview-heading h3 { font-size: 22px; }
    .preview-heading small { font-size: 8px; }
    .preview-badge { font-size: 8px; padding: 4px 6px; }
    .preview-stats > div { padding: 12px 8px; }
    .hero-buttons > a { width: 100%; }
    .auth-main { padding-inline: 20px; }
    .auth-form .flex.items-center.justify-between { gap: 12px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:2rem}.pricing-card{display:flex;flex-direction:column;gap:1rem;padding:2rem;border:1px solid #e7e5e4;border-radius:1.5rem;background:#fff;box-shadow:0 18px 45px rgba(28,25,23,.06)}.pricing-card-featured{border-color:#2563eb;box-shadow:0 22px 55px rgba(37,99,235,.14);transform:translateY(-8px)}.pricing-label{align-self:flex-start;padding:.35rem .75rem;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.pricing-card h3{font-size:1.35rem}.pricing-price{font-size:1.75rem!important;font-weight:800;color:#111827!important}.pricing-card ul{display:grid;gap:.6rem;margin:0 0 .5rem;padding:0;list-style:none;color:#57534e}.pricing-card li:before{content:'✓';color:#16a34a;font-weight:900;margin-right:.55rem}.pricing-card a{margin-top:auto;text-align:center}@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}.pricing-card-featured{transform:none}}