/* =============================================================================
   Fre18 — shared site styles (purple-gradient SaaS direction)
   One stylesheet, linked by every page, so the look stays consistent.
   ============================================================================= */
:root {
  /* warm cream base with soft violet tints — calm, not stark, not dark */
  --bg: #FBF8F3;                  /* warm cream */
  --bg-soft: #F3EEFB;            /* soft violet-tinted section */
  --card: #FFFFFF;              /* cards lift gently off the cream */
  --ink: #241C3B;               /* deep aubergine-ink text */
  --ink-soft: #6B6486;          /* muted */
  --line: #E8E0F0;              /* soft violet-grey borders */
  --grad-a: #6D28D9;            /* rich violet */
  --grad-b: #9333EA;           /* saturated purple */
  --violet: #7C3AED;
  --violet-deep: #5B21B6;
  --violet-soft: #EDE6FB;       /* soft violet fill */
  --violet-ink: #EBE3F7;        /* the "statement" section — a deeper violet wash, still light */
  --amber: #E8890C;
  --green: #10B981;
  --radius: 14px;
  --shadow: 0 12px 40px -18px rgba(109,40,217,0.22);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 26px; }
.grad-text {
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- nav ---- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,248,243,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand .mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 12px -4px rgba(102,126,234,0.55); flex-shrink: 0;
}
.brand .mark svg { width: 19px; height: 19px; display: block; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
/* the CTA button in the nav must keep its white label — .nav-links a would
   otherwise win on specificity and render the text grey on the gradient */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: #fff; }
.btn {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px;
  text-decoration: none; cursor: pointer; border-radius: 10px; padding: 11px 20px;
  border: 1px solid transparent; transition: all .18s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #fff;
  box-shadow: 0 6px 20px -8px rgba(102,126,234,0.6); font-weight: 600; letter-spacing: 0.01em;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(102,126,234,0.7); }
/* protect the label from Google Translate's injected font/color, without forcing a color */
.btn-primary span, .btn-primary font { color: inherit !important; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.nav-links .btn { padding: 9px 17px; }

/* ---- hero + page headers ---- */
.page-head { padding: 74px 0 20px; text-align: center; }
.page-head .eyebrow { justify-content: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--violet); background: var(--violet-soft);
  padding: 7px 15px; border-radius: 30px; margin-bottom: 22px;
}
h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.lead { font-size: 19px; color: var(--ink-soft); max-width: 56ch; margin: 20px auto 0; }
.hero { padding: 80px 0 60px; text-align: center; }
.hero h1 { max-width: 18ch; margin: 0 auto; }
.hero-cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 16px; }

/* ---- generic section ---- */
section { padding: 70px 0; }
.sec-eyebrow { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); margin-bottom: 12px; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; text-align: center; max-width: 22ch; margin: 0 auto; }
.sec-sub { text-align: center; font-size: 17px; color: var(--ink-soft); max-width: 54ch; margin: 16px auto 0; }

/* ---- product preview card (hero visual) ---- */
.preview {
  margin: 52px auto 0; max-width: 880px; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
.preview-top {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.preview-top .d { width: 11px; height: 11px; border-radius: 50%; }
.preview-body { padding: 6px 0; }
.prow { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.prow:last-child { border-bottom: none; }
.prow .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.pill.ok { background: #E4F7EF; color: #0B7A57; }
.pill.warn { background: #FBEEDC; color: #B26A08; }

/* ---- feature grid ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .18s, box-shadow .18s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; margin-bottom: 16px; }
.card h3 { font-size: 19px; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.01em; }
.card p { font-size: 14.5px; color: var(--ink-soft); }
.card .n { font-size: 13px; font-weight: 700; color: var(--violet); font-family: 'Inter'; }

/* ---- soft band ---- */
.band { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* statement section — a soft violet wash that stands apart from the cream. */
.band-dark { background: var(--violet-ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark .card { background: #fff; border-color: var(--line); }

/* ---- pricing ---- */
.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-top: 50px; align-items: stretch;
}
.price-grid .price-card { padding: 24px 20px; }
.price-grid .amt { font-size: 34px; }
.price-grid .amt small { font-size: 14px; }
.price-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--violet); box-shadow: var(--shadow); position: relative; }
.price-card .tag-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; }
.price-card .plan { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.price-card .amt { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 2px; }
.price-card .amt small { font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.price-card .desc { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; flex: 1; }
.price-card li { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.price-card li svg { flex-shrink: 0; margin-top: 3px; color: var(--green); }
.price-card .btn { justify-content: center; }

/* ---- faq ---- */
.faq { max-width: 760px; margin: 44px auto 0; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; gap: 16px; font-size: 18px; font-weight: 600; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary .pl { margin-left: auto; color: var(--violet); font-size: 24px; line-height: 1; transition: transform .2s; }
details[open] summary .pl { transform: rotate(45deg); }
details p { padding: 0 0 24px; font-size: 15px; color: var(--ink-soft); }

/* ---- about / prose ---- */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { text-align: left; margin: 40px 0 14px; font-size: 26px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 16px; color: var(--ink-soft); margin-bottom: 16px; }
.prose ul { margin: 0 0 16px 22px; }
.prose li { font-size: 16px; color: var(--ink-soft); margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.updated { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 30px; }

/* ---- contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 44px; align-items: start; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font-size: 14.5px; font-family: 'Inter'; background: var(--bg-soft); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.contact-side .card { margin-bottom: 16px; }
.contact-side .card p { margin: 0; }
.contact-side a { color: var(--violet); text-decoration: none; font-weight: 600; }

/* ---- CTA band ---- */
.cta-band { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #fff; text-align: center; border-radius: 0; }
.cta-band h2, .cta-band .sec-sub { color: #fff; }
.cta-band .btn-primary { background: #fff; color: var(--violet-deep); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.3); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-band .btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: 44px 0 32px; background: var(--bg-soft); }
.foot-grid { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.foot-brand { max-width: 300px; }
.foot-brand p { font-size: 13.5px; color: var(--ink-soft); margin-top: 12px; }
.foot-cols { margin-left: auto; display: flex; gap: 60px; flex-wrap: wrap; }
.foot-col h4 { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.foot-col a { display: block; color: var(--ink); text-decoration: none; font-size: 14px; margin-bottom: 9px; }
.foot-col a:hover { color: var(--violet); }
.foot-base { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 22px; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 860px) {
  .nav-links a:not(.btn) { display: none; }
  .grid-3, .grid-2, .price-grid, .contact-grid { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 1.3fr 1fr 1.1fr; }
  .prow .hide-m { display: none; }
  .foot-cols { margin-left: 0; gap: 40px; }
}

/* ---- language switcher (custom select, drives hidden Google Translate) ---- */
.lang-select {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 34px 8px 13px; cursor: pointer; line-height: 1.2;
  min-width: 150px;                       /* wide enough — no clipped labels */
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B5E77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s, color .15s;
}
.lang-select:hover { border-color: var(--violet); color: var(--ink); }
.lang-select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }

/* hide Google's own widget + injected chrome entirely — we drive it ourselves */
#google_translate_element, .goog-te-gadget { display: none !important; }
body { top: 0 !important; }
.goog-te-banner-frame, .skiptranslate > iframe { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

@media (max-width: 860px) { #lang-switch { display: none; } }

/* =============================================================================
   Lead-capture chatbot
   ============================================================================= */
#fbot { position: fixed !important; right: 22px; bottom: 22px; z-index: 9999; font-family: 'Inter', system-ui, sans-serif; }
#fbot-launch {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 10px 30px -8px rgba(102,126,234,0.6); display: grid; place-items: center;
  transition: transform .18s;
}
#fbot-launch:hover { transform: translateY(-2px) scale(1.04); }
#fbot-panel {
  position: absolute; right: 0; bottom: 72px; width: 360px; max-width: calc(100vw - 44px);
  height: 520px; max-height: calc(100vh - 120px); background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(26,27,46,0.4); overflow: hidden;
  display: none; flex-direction: column;
}
#fbot-panel.open { display: flex; animation: fbot-in .22s ease; }
@keyframes fbot-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#fbot-head {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: #fff;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
}
#fbot-head .fbot-avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.5);
}
#fbot-head .fbot-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fbot-head .fbot-title { font-weight: 700; font-size: 15px; }
#fbot-head .fbot-sub { font-size: 12px; opacity: 0.85; }
#fbot-close { margin-left: auto; background: transparent; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.85; }
#fbot-close:hover { opacity: 1; }
#fbot-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; background: var(--bg); }
.fbot-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.fbot-msg.bot { background: var(--bg-soft); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 5px; color: var(--ink); }
.fbot-msg.me { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.fbot-msg.bot b { color: var(--ink); }
.fbot-typing { display: flex; gap: 4px; align-items: center; }
.fbot-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; animation: fbot-blink 1.2s infinite; }
.fbot-typing span:nth-child(2) { animation-delay: .2s; }
.fbot-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes fbot-blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 0.9; } }
#fbot-input { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; background: var(--card); }
.fbot-opt {
  border: 1px solid var(--violet); color: var(--violet); background: var(--violet-soft);
  border-radius: 20px; padding: 8px 13px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif; transition: background .15s;
}
.fbot-opt:hover { background: var(--violet-soft); }
.fbot-form { display: flex; width: 100%; gap: 8px; }
.fbot-form input {
  flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; font-family: 'Inter', system-ui, sans-serif; color: var(--ink);
}
.fbot-form input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.fbot-form button {
  border: none; border-radius: 10px; width: 42px; cursor: pointer; color: #fff; font-size: 18px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
}
@media (max-width: 480px) {
  #fbot-panel { width: calc(100vw - 32px); height: calc(100vh - 110px); }
}

/* =============================================================================
   "How it works" flow
   ============================================================================= */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px 18px; margin-top: 52px; align-items: stretch; }
.flow-step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 18px;
  transition: transform .18s, box-shadow .18s;
}
.flow-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.flow-arrow { display: grid; place-items: center; color: var(--violet); opacity: .5; }
.flow-body .flow-n { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--violet); }
.flow-body h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 8px; }
.flow-body p { font-size: 14px; color: var(--ink-soft); }
.flow-foot { text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 34px; }

/* the little visual at the top of each step */
.flow-visual {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 11px;
  padding: 16px; min-height: 132px; display: flex; flex-direction: column;
  justify-content: center; gap: 7px; position: relative; overflow: hidden;
}

/* step 1 + 2 — mini documents */
.mini-doc {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 2px 8px -4px rgba(26,27,46,.18);
}
.mini-doc.offset { margin-left: 26px; margin-top: -14px; }
.mini-doc.read { border-color: var(--violet); }
.mini-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-soft); padding: 2px 7px; border-radius: 4px; align-self: flex-start;
}
.mini-tag.alt { color: #B26A08; background: #FBEEDC; }
.mini-line { height: 5px; border-radius: 3px; background: var(--line); }
.mini-line.w80 { width: 80%; } .mini-line.w70 { width: 70%; }
.mini-line.w60 { width: 60%; } .mini-line.w50 { width: 50%; }
.mini-amt { font-size: 14px; font-weight: 700; color: var(--ink); }
.mini-field { font-size: 11px; color: var(--ink); display: flex; gap: 6px; }
.mini-field em { font-style: normal; color: var(--ink-soft); min-width: 52px; }

/* step 3 — merge */
.merge { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.merge-chip {
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 14px;
  background: var(--violet-soft); color: var(--violet);
}
.merge-chip.alt { background: #FBEEDC; color: #B26A08; margin-top: -2px; }
.merge-join {
  font-size: 10px; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em;
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  padding: 4px 0; width: 100%; text-align: center; margin: 3px 0;
}
.merge-out {
  font-size: 12px; font-weight: 700; color: #fff; padding: 5px 14px; border-radius: 14px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
}

/* step 4 — the check */
.check-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 11.5px; font-weight: 600; color: var(--ink);
}
.check-row.warn { border-color: var(--amber); }
.check-row .pill { font-size: 10.5px; padding: 3px 8px; }
.check-note { font-size: 10.5px; color: var(--ink-soft); text-align: right; font-style: italic; }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 12px; }
  .flow-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* ---- interactive pricing cards: click to compare ---- */
.price-card { cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.selected { border: 2px solid var(--violet); box-shadow: var(--shadow); }
.price-card.selected .amt { color: var(--violet); }
.price-card.dimmed { opacity: .62; }
.price-card.dimmed:hover { opacity: 1; }

@media (max-width: 860px) {
  .scale-track, .scale-axis { grid-template-columns: 1fr; }
  .scale-axis { display: none; }
}

/* =============================================================================
   Pricing estimator
   ============================================================================= */
.est {
  margin-top: 48px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px; box-shadow: var(--shadow);
}
.est-field { margin-bottom: 26px; }
.est-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.est-label span { font-size: 15px; font-weight: 600; }
.est-label output {
  margin-left: auto; font-size: 20px; font-weight: 800; color: var(--violet); letter-spacing: -.01em;
}
input[type="range"] {
  width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px;
  background: var(--violet-soft); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  border: 3px solid #fff; box-shadow: 0 2px 10px -2px rgba(102,126,234,.8);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 3px solid #fff;
  background: var(--violet); box-shadow: 0 2px 10px -2px rgba(102,126,234,.8);
}
.est-ticks { display: flex; justify-content: space-between; margin-top: 8px; }
.est-ticks span { font-size: 12px; color: var(--ink-soft); }
.est-opts { display: flex; gap: 9px; flex-wrap: wrap; }
.est-opts button {
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  padding: 10px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft); transition: all .15s;
}
.est-opts button:hover { border-color: var(--violet); color: var(--violet); }
.est-opts button.on {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px -8px rgba(102,126,234,.7);
}
.est-out {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  border-top: 1px solid var(--line); padding-top: 26px; margin-top: 30px;
}
.est-card { border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 3px; }
.est-card.plan { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #fff; }
.est-card.watch { background: var(--bg-soft); border: 1px solid var(--line); }
.est-cap { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.est-card strong { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.est-card.watch strong { color: var(--ink); }
.est-price { font-size: 14.5px; font-weight: 600; opacity: .9; }
.est-why { font-size: 12.5px; margin-top: 9px; opacity: .82; line-height: 1.5; }

@media (max-width: 860px) {
  .est { padding: 22px; }
  .est-out { grid-template-columns: 1fr; }
}

/* ---- feature illustration ---- */
.hero-art { margin: 34px 0 0; }
.hero-art img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(26,27,46,.55);
}
.hero-art figcaption {
  text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 14px;
}

/* ---- 404 ---- */
.notfound { text-align: center; padding: 56px 0 80px; }
.notfound img { width: 100%; max-width: 460px; height: auto; border-radius: 18px; margin-bottom: 26px; }
.notfound-code {
  font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--violet);
  background: var(--violet-soft); display: inline-block; padding: 6px 15px; border-radius: 30px; margin-bottom: 18px;
}
.notfound h1 { max-width: 16ch; margin: 0 auto; }
.notfound .lead { margin-bottom: 4px; }

/* =============================================================================
   Section accents (FlowVenue-style colour coding)
   Add ONE class to a <section> and its eyebrow + card icons + soft fills take
   that accent. Text and backgrounds stay neutral — only the accent moves. Each
   colour keeps its meaning: violet=brand, amber=alerts/cost, green=matched,
   teal=info/how-it-works.
   ============================================================================= */
.accent-violet { --ac: var(--violet);   --ac-soft: var(--violet-soft); --ac-deep: #5B21B6; }
.accent-amber  { --ac: #C2740A;          --ac-soft: #FBEEDC;            --ac-deep: #B26A08; }
.accent-green  { --ac: #0B7A57;          --ac-soft: #E4F7EF;            --ac-deep: #0B7A57; }
.accent-teal   { --ac: #0E7490;          --ac-soft: #DFF3F7;            --ac-deep: #0E7490; }
.accent-blue   { --ac: #2563EB;          --ac-soft: #E4ECFE;            --ac-deep: #1D4ED8; }

/* eyebrow, icons and the little accents follow --ac when a section sets it */
[class*="accent-"] .sec-eyebrow { color: var(--ac); }
[class*="accent-"] .card .ic { background: var(--ac-soft); color: var(--ac); }
[class*="accent-"] .flow-body .flow-n { color: var(--ac); }
[class*="accent-"] .flow-arrow { color: var(--ac); }
[class*="accent-"] .sec-sub .hl { color: var(--ac); font-weight: 600; }
/* a soft tint on the section's own background, so the colour is felt not just seen */
.band.accent-violet { background: #F3EEFB; }
.band.accent-amber  { background: #FBF4EA; }
.band.accent-green  { background: #EBF7F1; }
.band.accent-teal   { background: #EAF4F7; }
.band.accent-blue   { background: #EAF0FC; }

/* =============================================================================
   Background flow motif
   A faint, continuous flow diagram — connected nodes and arrows — tiled behind
   the whole page on every page. Low opacity so it reads as texture, not content,
   and never competes with the text above it. Pure SVG data-URI, no image file.
   ============================================================================= */
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%237C3AED' stroke-width='1.4' opacity='0.06'%3E%3Cline x1='60' y1='60' x2='150' y2='60'/%3E%3Cpath d='M143 55l8 5-8 5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='180' y1='60' x2='180' y2='150'/%3E%3Cpath d='M175 143l5 8 5-8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='210' y1='180' x2='285' y2='180'/%3E%3Cpath d='M278 175l8 5-8 5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='60' y1='90' x2='60' y2='230'/%3E%3Cpath d='M55 223l5 8 5-8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='90' y1='260' x2='170' y2='260'/%3E%3Cpath d='M163 255l8 5-8 5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg fill='%232563EB' opacity='0.06'%3E%3Ccircle cx='45' cy='60' r='7'/%3E%3Ccircle cx='180' cy='45' r='7'/%3E%3Ccircle cx='180' cy='180' r='7'/%3E%3Ccircle cx='300' cy='180' r='7'/%3E%3Ccircle cx='60' cy='245' r='7'/%3E%3Ccircle cx='185' cy='260' r='7'/%3E%3C/g%3E%3Cg fill='none' stroke='%237C3AED' stroke-width='1.4' opacity='0.06'%3E%3Crect x='232' y='40' width='40' height='30' rx='5'/%3E%3Crect x='36' y='150' width='40' height='30' rx='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 340px 340px;
  background-attachment: fixed;
}
/* real content sits above the motif */
header, footer, main, section, .band, [class*="accent-"], .cta-band {
  position: relative; z-index: 1;
}
/* soft colour glow still warms the hero, over the motif */
.hero {
  background:
    radial-gradient(900px 380px at 70% -8%, rgba(37,99,235,0.05), transparent 60%),
    radial-gradient(700px 320px at 15% 0%, rgba(124,58,237,0.05), transparent 55%);
}

/* pricing trial banner */
.trial-note {
  margin: 26px auto 0; max-width: 640px; text-align: center;
  background: var(--violet-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; font-size: 14px; color: var(--ink); line-height: 1.6;
}
.trial-note strong { color: var(--violet-deep); }