:root {
  /* This site has one light theme, full stop -- without this, Firefox (and
     some other browsers) will auto-apply their own dark-mode heuristics to
     native-styled elements when the OS/browser is in dark mode, which is
     what was washing out text contrast (e.g. the Demo nav pill) even
     though every color here is hardcoded and never meant to change. */
  color-scheme: light;
  --bg: #d9ebba;
  --card: #edf5dd;
  --text: #111111;
  --muted: #5d6463;
  --accent: #6fd3db;
  --accent-2: #ff7a59;
  --dark: #0d0d0d;
  --white: #ffffff;
  --border: rgba(17, 17, 17, 0.12);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: #f8fbf2;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { width: min(1320px, calc(100% - 40px)); margin: 0 auto; }
/* Grid/flex items default to min-width:auto, which refuses to shrink below
   the item's own content (e.g. an SVG or a row of buttons) even when the
   track itself is narrower -- this is what silently pushes mobile layouts
   wider than the viewport instead of wrapping. Forcing min-width:0 on every
   direct child of our grid containers is the standard fix. */
.hero-grid > *, .split-card > *, .two-col > *, .steps-grid > *,
.pricing-grid > *, .faq-layout > *, .contact-grid > *, .footer-grid > *,
.profile-grid > *, .team-grid > * {
  min-width: 0;
}
.section { padding: 56px 0; }
.soft-green-bg { background: var(--bg); }
.center { text-align: center; }
.narrow { max-width: 760px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  background: rgba(217, 235, 186, 0.84);
  border-bottom: 1px solid rgba(17,17,17,0.05);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
}
.brand { font-weight: 800; letter-spacing: -0.03em; }
.nav-collapse { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.nav-links, .nav-actions { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  color: #23292a;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--accent-2); }
/* Higher specificity than `.nav-links a`'s color rule above, which would
   otherwise win and darken this pill's text to near-unreadable against its
   own dark background -- that (not a browser dark-mode quirk) was the
   actual cause of the low-contrast "Demo" pill. */
.nav-links .btn.pill { padding: 9px 20px; font-size: 0.92rem; color: #fff; }
.profile-icon-link { font-size: 2rem; line-height: 1; color: #1f1f1f; display: inline-flex; }
.profile-icon-link:hover { color: var(--accent); }
.avatar-img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(17,17,17,0.12); display: block;
}
.avatar-upload-row { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.avatar-img-lg { width: 72px; height: 72px; }
.avatar-icon-lg { font-size: 4.2rem; line-height: 1; color: #1f1f1f; }
.nav-toggle {
  display: none;
  background: transparent; border: 0; font-size: 1.4rem; line-height: 1;
  color: var(--text); padding: 6px; cursor: pointer; margin-left: auto;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 600;
  cursor: pointer;
}
.pill { border-radius: 999px; }
.btn-primary { background: var(--accent); }
.btn-link { text-decoration: underline; padding-inline: 8px; }
.btn-dark { background: #1f1f1f; color: #fff; }
.btn-secondary { background: #335ea8; color: #fff; }
.btn-accent { background: var(--accent-2); color: #fff; }
.btn-muted { background: #d7d2d7; }
.btn-outline { border: 1px solid var(--border); background: transparent; }
.btn-light { background: #f2f2f2; }
.btn-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}
.btn-google:hover { background: #f7f8f8; }
.btn-google:disabled { opacity: 0.6; cursor: not-allowed; }
.google-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* Click feedback: any button flashes blue while actively pressed,
   regardless of its base color. */
.btn:active { background: #2f6fed; color: #fff; }
.full { width: 100%; }

.btn-danger { background: #e0393e; color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }

/* Session flash messages (login/logout, upload confirmations, etc.) render
   as fixed-position toasts rather than an in-flow banner -- an in-flow
   banner shifted every other element on the page down when it appeared,
   which read as layout jitter. Fixed positioning keeps the page's margins
   untouched no matter how many toasts are stacked. */
.toast-stack {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}
.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(17,17,17,0.14);
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f1f1f;
  animation: toast-in 0.25s ease-out;
}
.toast.toast-out { animation: toast-out 0.2s ease-in forwards; }
.toast-success { border-left: 4px solid #4c9a4c; }
.toast-error { border-left: 4px solid #e0393e; }
.toast-close {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.45;
  cursor: pointer;
  flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}
@media (max-width: 640px) {
  .toast-stack { left: 16px; right: 16px; top: 80px; max-width: none; }
}

.flash-stack { padding-top: 12px; }
.flash {
  margin: 8px 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: #eef7e5;
  border: 1px solid #d5e7bf;
}

.hero-section { min-height: calc(100vh - 88px); display: flex; align-items: center; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.hero-copy h1, .inner-hero h1 { font-size: clamp(3rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.05em; margin: 14px 0 16px; }
.hero-copy p, .inner-hero p { color: var(--muted); font-size: 1.08rem; max-width: 640px; }
/* A <p> with its own max-width is still a left-hugging block by default even
   inside a .center ancestor -- text-align only centers the text *within*
   that box, not the box itself. Every hero subtitle sitewide uses this
   container center narrow + <p> pattern, so fixing it once here fixes all
   of them (About/Contact/FAQ/Model/Demo/legal pages) instead of patching
   each template individually. */
.center p { margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; gap: 14px; margin: 28px 0 36px; flex-wrap: wrap; }
.hero-banner { font-size: clamp(1.4rem, 2.4vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-top: 46px; color: #2c1240; }
.hero-visual { display: flex; align-items: center; justify-content: center; gap: 22px; }
.graph-card, .sheet-card {
  position: relative;
  height: 320px;
  border-radius: var(--radius-xl);
}
.graph-card { width: 360px; }
.sheet-card {
  width: 180px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.sheet-card i { font-size: 5.8rem; color: #1d7c47; }
.arrow i { font-size: 2.2rem; }
.node {
  position: absolute;
  width: 72px; height: 72px; border-radius: 50%;
  background: #ef7878; box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.n1 { left: 10px; top: 155px; }
.n2 { left: 116px; top: 168px; }
.n3 { left: 218px; top: 98px; }
.n4 { left: 278px; top: 195px; }
.n5 { left: 216px; top: 250px; }
.line {
  position: absolute;
  height: 2px; background: #222; transform-origin: left center;
}
.l1 { left: 74px; top: 193px; width: 58px; transform: rotate(8deg); }
.l2 { left: 178px; top: 178px; width: 71px; transform: rotate(-34deg); }
.l3 { left: 177px; top: 219px; width: 78px; transform: rotate(35deg); }
.l4 { left: 252px; top: 148px; width: 76px; transform: rotate(52deg); }
.l5 { left: 254px; top: 172px; width: 2px; height: 114px; }

.split-card, .two-col, .faq-layout, .contact-grid, .pricing-grid, .steps-grid {
  display: grid; gap: 28px;
}
.split-card, .two-col { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
.split-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow);
}
.feature-list { display: grid; gap: 16px; }
.feature-item {
  padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px;
  display: flex; gap: 12px; align-items: center; background: #fafcf7;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    color: #111;
    background: transparent;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.upload-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.brand:visited,
.brand:hover,
.brand:focus,
.brand:active {
    color: #111;
    text-decoration: none;
    background: transparent;
}

.brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.brand span {
    display: inline-block;
    line-height: 1;
}

.steps-grid { grid-template-columns: repeat(4, 1fr); }
.step-card, .pricing-card, .info-box, .question-card, .profile-card {
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px;
}

.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.profile-card h2 { margin-top: 0; font-size: 1.2rem; }
.profile-card-wide { grid-column: 1 / -1; }
.step-card span { font-size: 0.9rem; font-weight: 800; color: var(--muted); }
.step-card h3 { margin-bottom: 8px; }
.info-box ul { padding-left: 20px; }
.info-box li { margin-bottom: 10px; }

.pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.pricing-card { box-shadow: none; display: flex; flex-direction: column; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.price { font-size: 3rem; font-weight: 800; letter-spacing: -0.06em; }
.pricing-card ul { list-style: none; padding: 0; margin: 0 0 22px; }
.pricing-card li { margin: 12px 0; color: #343a3a; }
.pricing-card i { color: #66706f; }
/* CTA is always the last child (a real link, or a disabled "Coming soon"
   span) -- pinning it to the bottom regardless of tag is what actually
   keeps every card's button on the same baseline. */
.pricing-card > *:last-child { margin-top: auto; }
.pricing-card.coming-soon { opacity: 0.85; }
.btn.disabled {
  background: #ececec; color: var(--muted); cursor: not-allowed;
  pointer-events: none;
}

.plan-table-wrap { margin-top: 40px; }
.plan-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.plan-table th, .plan-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.plan-table th { background: #fafcf7; font-weight: 700; }
.plan-table td:not(:first-child), .plan-table th:not(:first-child) { text-align: center; }
.plan-table tbody tr:last-child td { border-bottom: 0; }
.plan-table i.fa-check { color: #1d7c47; }
.plan-table i.fa-xmark { color: #c8c8c8; }

.faq-layout { grid-template-columns: 1.7fr 0.9fr; align-items: start; }
.faq-list { display: grid; gap: 16px; }
.faq-item {
  background: #ececec; border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; overflow: hidden;
}
.faq-question {
  width: 100%; background: transparent; border: 0; padding: 22px 22px; font-size: 1.1rem; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer;
}
.faq-answer { display: none; padding: 0 22px 22px; color: #383838; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-question i { transform: rotate(45deg); }
.question-card { text-align: center; padding: 56px 28px; }
.question-card i { font-size: 3.4rem; margin-bottom: 18px; }

.contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
.contact-panel, .auth-card {
  border-radius: 26px; box-shadow: var(--shadow); overflow: hidden;
}
.dark-panel {
  background: #050505; color: #fff; padding: 36px; position: relative;
}
.contact-meta p, .site-footer p { display: flex; gap: 12px; align-items: flex-start; }
.social-row { display: flex; gap: 14px; margin-top: 34px; }
.social-row span {
  width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.18); display: inline-block;
}
.social-row .active { background: #fff; }
.contact-form, .auth-form {
  background: transparent; padding: 20px 0;
}
.form-grid.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
label, fieldset { display: block; margin-bottom: 22px; font-weight: 600; color: #2d3534; }
input, textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(0,0,0,0.25); background: transparent;
  padding: 12px 0; font: inherit; margin-top: 8px;
}
fieldset { border: 0; padding: 0; margin-top: 10px; }
legend { margin-bottom: 12px; }
.radio-row { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 500; }
.send-btn { min-width: 230px; }

.auth-wrap { min-height: calc(100vh - 160px); display: flex; align-items: center; }
.auth-card {
  max-width: 980px; margin: 0 auto; background: rgba(255,255,255,0.55);
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(0,0,0,0.08);
}
.auth-card.compact { max-width: 760px; grid-template-columns: 1fr 1fr; }
.auth-copy { padding: 40px; }
.auth-copy h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 10px; }
.auth-form { padding: 40px; }
.auth-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: 0.95rem; }
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox input { width: auto; margin: 0; }
.auth-footer { color: var(--muted); margin-top: 18px; }

.site-footer {
  background: #050505; color: #fff; padding: 56px 0 70px; margin-top: 30px;
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.site-footer h4 { margin-top: 0; font-size: 1.2rem; }
.site-footer a { display: block; color: rgba(255,255,255,0.85); margin: 12px 0; }

.muted { color: var(--muted); }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 32px; }
.team-card {
  background: rgba(255,255,255,0.65); border: 1px solid var(--border); border-radius: 22px;
  padding: 30px; text-align: center;
}
.team-avatar {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em;
  overflow: hidden;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { margin: 0 0 4px; }
.team-role { color: var(--muted); font-weight: 600; margin: 0 0 14px; }
.team-bio {
  text-align: left; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.team-bio li {
  position: relative; padding-left: 16px; color: var(--muted);
  font-size: 0.95rem; line-height: 1.5;
}
.team-bio li::before { content: "\2022"; position: absolute; left: 0; color: var(--accent); }

.upload-cta { display: flex; align-items: center; justify-content: center; }

.sample-data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.sample-data-card { background: #fafcf7; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.sample-data-card h4 { margin: 0 0 6px; }
.muted.small { font-size: 0.88rem; margin: 0 0 14px; }
.sample-data-download { margin-top: 20px; }

/* Excel-style preview: gridlines on every cell, shaded header row, and a
   narrow shaded row-number column -- like a real spreadsheet, not a CSV
   dump. */
.spreadsheet { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.86rem; }
.spreadsheet th, .spreadsheet td {
  border: 1px solid #d7dcd6; padding: 7px 12px; text-align: left; white-space: nowrap;
}
.spreadsheet thead th {
  background: #eef2ea; font-weight: 700; color: #2d3534;
}
.spreadsheet .row-num {
  background: #eef2ea; color: var(--muted); font-weight: 700; text-align: center;
  width: 28px; padding: 7px 8px;
}
.spreadsheet tbody tr:nth-child(even) { background: #fbfdf9; }

.demo-form { display: grid; gap: 18px; }
.demo-form label { margin-bottom: 0; }
.demo-form input, .demo-form select {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin-top: 8px; background: #fff;
}

.result-summary { display: flex; gap: 20px; margin: 28px 0; flex-wrap: wrap; }
.result-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px 26px; box-shadow: var(--shadow); min-width: 160px;
}
.result-card h3 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.result-card p { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
.result-table { width: 100%; border-collapse: collapse; background: #fff; }
.result-table th, .result-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.result-table th { background: #fafcf7; font-weight: 700; }
.result-table tbody tr:last-child td { border-bottom: 0; }

.file-name { color: var(--muted); }

.validation-block { margin: 18px 0; padding: 18px 22px; border-radius: var(--radius-md); }
.validation-block h3 { margin-top: 0; }
.validation-block ul { margin: 0; padding-left: 20px; }
.validation-errors { background: #fdecea; border: 1px solid #f3b9b2; }
.validation-warnings { background: #fff6e0; border: 1px solid #f0d685; }
.validation-fixes { background: #eaf6ee; border: 1px solid #b7e0c3; }

.flash-success { background: #eaf6ee; border-color: #b7e0c3; }
.flash-error { background: #fdecea; border-color: #f3b9b2; }

@media (max-width: 980px) {
  .hero-grid, .split-card, .two-col, .faq-layout, .contact-grid, .auth-card, .auth-card.compact, .footer-grid, .profile-grid, .team-grid {
    grid-template-columns: 1fr;
  }
  .pricing-grid, .steps-grid { grid-template-columns: 1fr 1fr; }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #fdfdfb;
    padding: 6px 20px 18px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .nav-collapse.open { max-height: 70vh; opacity: 1; overflow-y: auto; }
  .nav-collapse .nav-links,
  .nav-collapse .nav-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 6px;
  }
  .nav-collapse .nav-links a { padding: 12px 4px; }
  .nav-collapse .nav-links .btn.pill { width: 100%; }
  .nav-collapse .nav-actions {
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
  }
  .nav-collapse .nav-actions .btn,
  .nav-collapse .nav-actions .profile-icon-link { width: 100%; }
  .nav-collapse .profile-icon-link { justify-content: flex-start; gap: 10px; }
  .nav-collapse .profile-icon-link::after { content: "Profile"; font-size: 1rem; font-weight: 600; }
}

@media (max-width: 680px) {
  .container { width: min(100% - 24px, 1320px); }
  .section { padding: 40px 0; }
  .pricing-grid, .steps-grid, .form-grid.two, .result-summary { grid-template-columns: 1fr; }
  .hero-visual { flex-direction: column; }
  .graph-card { width: 100%; max-width: 360px; }
  .sheet-card { width: 160px; height: 160px; }
  .hero-section { min-height: auto; padding: 48px 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .send-btn { min-width: 0; width: 100%; }
  .result-summary { display: grid; }
  .split-card { padding: 24px; }
}