/* ===========================================================================
   averon-landing.css — modern SaaS landing sections, LIGHT theme.

   NEW FILE. Loads after averon-light.css. Every class is prefixed .av- so it
   cannot collide with style.css, evaluator-additions.css, service-pages.css,
   or with any id or class the engine JavaScript addresses.
   =========================================================================== */

/* ------------------------------------------------------------- primitives */
.av-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.av-sec  { padding: 4.6rem 0; position: relative; }
.av-sec-sm { padding: 2.8rem 0; }
.av-alt { background: #F8FAFC; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; }

.av-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #EEF2FF; border: 1px solid #C7D2FE; color: #4338CA;
  padding: .38rem .8rem; border-radius: 999px;
  font-size: .73rem; font-weight: 600; letter-spacing: .01em;
}
.av-badge .av-dot { width: 6px; height: 6px; border-radius: 50%; background: #4F46E5; }

.av-h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.035em;
  margin: 1.05rem 0 1rem; color: #0F172A;
}
.av-h1 em { font-style: normal; color: #4F46E5; }
.av-h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 650; letter-spacing: -.03em; line-height: 1.18;
  margin: 0 0 .7rem; color: #0F172A;
}
.av-sub {
  font-size: 1.02rem; line-height: 1.75; color: #475569;
  max-width: 640px; margin: 0 0 1.7rem;
}
.av-center { text-align: center; }
.av-center .av-sub { margin-left: auto; margin-right: auto; }

.av-cta-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.av-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.45rem; border-radius: 10px; font-size: .9rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background .16s, transform .16s, box-shadow .16s, border-color .16s;
}
.av-btn-primary { background: #4F46E5; color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.24); }
.av-btn-primary:hover { background: #4338CA; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79,70,229,.28); }
.av-btn-ghost { background: #fff; color: #0F172A; border-color: #CBD5E1; }
.av-btn-ghost:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }

.av-trust {
  display: flex; gap: 1.3rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.3rem; font-size: .82rem; color: #475569;
}
.av-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.av-trust .av-tick { color: #059669; font-weight: 700; }

/* ------------------------------------------------------------------- HERO */
.av-hero {
  padding: 3.4rem 0 4rem; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 62%);
  border-bottom: 1px solid #E2E8F0;
}
.av-hero-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,500px);
  gap: 3rem; align-items: start;
}
@media (max-width: 1000px) { .av-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; } }

.av-engine-shell {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 18px; padding: 1.4rem;
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 18px 44px rgba(15,23,42,.10);
}
.av-engine-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid #E2E8F0;
}
.av-engine-head h2 { font-size: 1rem; font-weight: 650; margin: 0; color: #0F172A; }
.av-engine-head .av-badge { font-size: .67rem; padding: .24rem .58rem; }

/* --------------------------------------------------------------- STAT BAR */
.av-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; background: #fff;
}
@media (max-width: 760px) { .av-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.av-stat { padding: 1.35rem 1.1rem; text-align: center; border-right: 1px solid #E2E8F0; }
.av-stat:last-child { border-right: none; }
@media (max-width: 760px) {
  .av-stat:nth-child(2) { border-right: none; }
  .av-stat:nth-child(1), .av-stat:nth-child(2) { border-bottom: 1px solid #E2E8F0; }
}
.av-stat-v { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; color: #4F46E5; }
.av-stat-l { font-size: .78rem; color: #475569; margin-top: .25rem; }

/* ----------------------------------------------------------- BENTO GRID */
.av-bento { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 980px) { .av-bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .av-bento { grid-template-columns: 1fr; } }

.av-card {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.av-card:hover {
  transform: translateY(-3px); border-color: #CBD5E1;
  box-shadow: 0 2px 6px rgba(15,23,42,.07), 0 16px 36px rgba(15,23,42,.09);
}
.av-card-ico {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: .9rem;
  background: #EEF2FF; border: 1px solid #C7D2FE;
  display: flex; align-items: center; justify-content: center;
}
.av-card-ico svg { width: 19px; height: 19px; stroke: #4F46E5; fill: none; stroke-width: 1.8; }
.av-card h3 { font-size: 1.02rem; font-weight: 650; margin: 0 0 .35rem; color: #0F172A; letter-spacing: -.02em; }
.av-card p { font-size: .89rem; line-height: 1.7; color: #475569; margin: 0 0 1rem; flex: 1; }

/* mini product visuals */
.av-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.av-chip {
  font-size: .72rem; font-weight: 600; padding: .3rem .6rem; border-radius: 6px;
  background: #F1F5F9; border: 1px solid #E2E8F0; color: #475569;
}
.av-chip-on { background: #EEF2FF; border-color: #C7D2FE; color: #4338CA; }

.av-meter { display: flex; align-items: center; gap: .6rem; font-size: .76rem; color: #475569; }
.av-meter-bar { flex: 1; height: 6px; border-radius: 99px; background: #E2E8F0; overflow: hidden; }
.av-meter-fill { height: 100%; border-radius: 99px; background: #4F46E5; width: 0; transition: width 1.3s cubic-bezier(.2,.7,.3,1); }
.av-reveal-in .av-meter-fill { width: var(--w, 70%); }

.av-kv { display: grid; gap: .4rem; }
.av-kv-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; padding: .45rem .65rem; border-radius: 7px;
  background: #F8FAFC; border: 1px solid #E2E8F0;
}
.av-kv-row span:first-child { color: #475569; }
.av-kv-row b { color: #0F172A; font-weight: 600; }

/* ------------------------------------------------------ SAMPLE REPORT */
.av-report {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 18px 44px rgba(15,23,42,.09);
}
.av-report-bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .8rem 1.1rem; background: #F8FAFC; border-bottom: 1px solid #E2E8F0;
}
.av-dot-r { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1; }
.av-report-file { margin-left: .6rem; font-size: .77rem; color: #64748B; font-family: ui-monospace, monospace; }
.av-report-body { padding: 1.6rem 1.7rem; }
@media (max-width: 640px) { .av-report-body { padding: 1.2rem 1rem; } }

.av-report-title { font-size: 1.05rem; font-weight: 650; color: #0F172A; margin: 0 0 .55rem; letter-spacing: -.02em; }
.av-report-meta { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

.av-sev { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .26rem .58rem; border-radius: 5px; }
.av-sev-hi  { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.av-sev-mid { background: #FFFBEB; border: 1px solid #FDE68A; color: #B45309; }
.av-sev-low { background: #EEF2FF; border: 1px solid #C7D2FE; color: #4338CA; }
.av-sev-ok  { background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; }

.av-finding { border-left: 3px solid #E2E8F0; padding: .1rem 0 .1rem 1rem; margin-bottom: 1.2rem; }
.av-finding:last-child { margin-bottom: 0; }
.av-finding.is-hi  { border-left-color: #EF4444; }
.av-finding.is-mid { border-left-color: #F59E0B; }
.av-finding.is-low { border-left-color: #4F46E5; }
.av-finding-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.av-finding-ref { font-size: .72rem; font-family: ui-monospace, monospace; color: #94A3B8; }
.av-finding h4 { font-size: .93rem; font-weight: 650; color: #0F172A; margin: 0; letter-spacing: -.01em; }
.av-finding p { font-size: .88rem; line-height: 1.72; color: #334155; margin: 0 0 .55rem; }
.av-finding .av-fix {
  font-size: .86rem; line-height: 1.65; color: #3730A3;
  background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 8px; padding: .6rem .75rem;
}
.av-report-section {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #94A3B8; margin: 1.6rem 0 .8rem;
}
.av-report-note {
  margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #E2E8F0;
  font-size: .82rem; color: #475569; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap;
}

/* --------------------------------------------------------------- STEPS */
.av-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 860px) { .av-steps { grid-template-columns: 1fr; } }
.av-step-n { font-size: 2.1rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #C7D2FE; margin-bottom: .5rem; }
.av-step h3 { font-size: 1.02rem; font-weight: 650; color: #0F172A; margin: 0 0 .35rem; }
.av-step p { font-size: .89rem; line-height: 1.7; color: #475569; margin: 0; }

/* --------------------------------------------------------------- SPLIT */
.av-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 860px) { .av-split { grid-template-columns: 1fr; } }
.av-split .av-card { padding: 1.8rem; }
.av-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.av-list li { font-size: .89rem; color: #475569; line-height: 1.65; padding-left: 1.5rem; position: relative; }
.av-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #4F46E5; font-weight: 700; font-size: .82rem; }
.av-list a { color: #4F46E5; font-weight: 600; }

/* ------------------------------------------------------------ FINAL CTA */
.av-final {
  text-align: center; padding: 4rem 2rem; border-radius: 20px;
  background: #0F172A; color: #fff;
}
.av-final .av-h2 { color: #fff; }
.av-final .av-sub { color: rgba(255,255,255,.68); }
.av-final .av-badge { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.2); color: #C7D2FE; }
.av-final .av-cta-row { justify-content: center; }
.av-final .av-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.av-final .av-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; border-color: #fff; }

/* --------------------------------------------------- SCROLL REVEAL
   Hidden only when JS is present to reveal it, so a visitor with JavaScript
   disabled sees the whole page rather than a blank one. */
.av-js .av-reveal { opacity: 0; transform: translateY(16px); }
.av-js .av-reveal-in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .av-js .av-reveal { opacity: 1 !important; transform: none !important; }
  .av-card:hover, .av-btn:hover { transform: none !important; }
  .av-meter-fill { transition: none !important; }
}

/* ===========================================================================
   ENGINE PANEL — base rules.

   These lived in index.php's inline <style> block. The landing rebuild
   replaced that block and dropped them, which is why the tile buttons lost
   width:100% and space-between (labels ran into prices), and why the upload
   flow rendered unstyled. They now live here so a page rewrite cannot
   silently delete them again.

   Class names are exactly the ones the markup already uses. No HTML changed.
   =========================================================================== */

/* ---- the grid: every tile identical in width AND height ---------------- */
.fe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;              /* tiles stretch to the tallest in the row */
}
@media (max-width: 760px) { .fe-grid { grid-template-columns: 1fr; } }

.fe-sq {
  display: flex;
  flex-direction: column;
  height: 100%;                      /* fill the stretched row */
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 1.25rem 1.3rem;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.fe-sq:hover {
  border-color: #C7D2FE;
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 14px 32px rgba(15,23,42,.08);
  transform: translateY(-2px);
}
.fe-sq.fe-span { grid-column: 1 / -1; }
@media (max-width: 760px) { .fe-sq.fe-span { grid-column: auto; } }

.fe-top { margin-bottom: .45rem; }
.fe-sq h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 650; color: #0F172A;
  margin: 0; line-height: 1.3; letter-spacing: -.02em;
}
.fe-desc {
  font-size: .86rem; line-height: 1.65; color: #475569;
  margin: 0 0 1.1rem;
  flex: 1 1 auto;                    /* the spacer that aligns every button row */
}

/* ---- buttons: identical height, label left, price right --------------- */
.fe-btns {
  display: flex; flex-direction: column; gap: .55rem;
  margin-top: auto;                  /* pin to the bottom of every tile */
}
.fe-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; box-sizing: border-box;
  min-height: 46px;                  /* every button the same height */
  padding: .6rem .95rem;
  border-radius: 10px; border: 1px solid transparent;
  font-family: inherit; font-size: .84rem; font-weight: 600;
  text-align: left; cursor: pointer; line-height: 1.3;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.fe-btn > span:first-child { flex: 1 1 auto; min-width: 0; }

/* the price/label on the right, visually separated from the label */
.fe-btn .fe-tag {
  white-space: nowrap; flex: 0 0 auto;
  font-weight: 700; font-size: .82rem;
  padding-left: .8rem; margin-left: .2rem;
  border-left: 1px solid currentColor;
  opacity: .85;
}

.fe-btn.fe-paid {
  background: #4F46E5; border-color: #4F46E5; color: #fff;
  box-shadow: 0 1px 2px rgba(79,70,229,.22);
}
.fe-btn.fe-paid:hover { background: #4338CA; border-color: #4338CA; }
.fe-btn.fe-paid .fe-tag { border-left-color: rgba(255,255,255,.38); }

.fe-btn.fe-free { background: #fff; border-color: #CBD5E1; color: #0F172A; }
.fe-btn.fe-free:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.fe-btn.fe-free .fe-tag { border-left-color: #CBD5E1; opacity: .7; }

.fe-btn.fe-soon {
  background: #F8FAFC; border: 1px dashed #CBD5E1; color: #94A3B8; cursor: not-allowed;
}
.fe-btn.fe-soon .fe-tag { border-left-color: #E2E8F0; }

/* ---- the samples / details link row ----------------------------------- */
.fe-samples {
  margin-top: .8rem; padding-top: .75rem;
  border-top: 1px solid #E2E8F0;
  font-size: .78rem; color: #94A3B8;
}
.fe-samples a { color: #4F46E5; font-weight: 600; text-decoration: none; }
.fe-samples a:hover { text-decoration: underline; }
.fe-samples span { margin: 0 .35rem; color: #CBD5E1; }

.fe-hidden { display: none !important; }

/* ---- the chosen-check bar shown above the flow ------------------------ */
.fe-chosen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 10px;
  padding: .7rem 1rem; margin-bottom: 1.2rem;
  font-size: .86rem; font-weight: 600; color: #3730A3;
}
.fe-change {
  background: none; border: none; color: #4F46E5; font-size: .8rem;
  text-decoration: underline; cursor: pointer; font-family: inherit;
  padding: 0; font-weight: 600;
}

/* ---- the upload / verify / pay flow ----------------------------------- */
.fe-flow { max-width: 560px; margin: 0 auto; }
.fe-flow .rt-step { margin-bottom: 1.15rem; }
.fe-flow .rt-step label {
  display: block; font-size: .85rem; font-weight: 600; color: #0F172A; margin-bottom: .4rem;
}
.fe-flow .rt-input {
  width: 100%; box-sizing: border-box;
  padding: .7rem .85rem; border: 1px solid #CBD5E1; border-radius: 9px;
  font-size: .9rem; font-family: inherit; color: #0F172A; background: #fff;
}
.fe-flow .rt-input:focus {
  outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.fe-flow .rt-btn {
  width: 100%; box-sizing: border-box; min-height: 46px;
  background: #4F46E5; color: #fff; border: 1px solid #4F46E5;
  border-radius: 10px; padding: .7rem 1rem;
  font-family: inherit; font-size: .87rem; font-weight: 600; cursor: pointer;
  transition: background .16s;
}
.fe-flow .rt-btn:hover:not(:disabled) { background: #4338CA; }
.fe-flow .rt-btn:disabled { background: #E2E8F0; border-color: #E2E8F0; color: #94A3B8; cursor: not-allowed; }
.fe-flow .rt-hidden { display: none; }
.fe-flow .rt-status { padding: .75rem .9rem; border-radius: 9px; font-size: .86rem; margin-bottom: 1rem; display: none; }
.fe-flow .rt-status.info    { background: #EEF2FF; border-left: 3px solid #4F46E5; color: #3730A3; display: block; }
.fe-flow .rt-status.success { background: #ECFDF5; border-left: 3px solid #10B981; color: #065F46; display: block; }
.fe-flow .rt-status.error   { background: #FEF2F2; border-left: 3px solid #EF4444; color: #991B1B; display: block; }
.fe-flow .rt-selected-note {
  font-size: .84rem; color: #3730A3; background: #EEF2FF; border: 1px solid #C7D2FE;
  border-radius: 9px; padding: .6rem .8rem; margin-bottom: 1.1rem;
}
.fe-flow .rt-note { font-size: .79rem; color: #64748B; margin-top: .8rem; line-height: 1.6; }

/* ---- the evaluator form inside the flow ------------------------------- */
.fe-flow .evaluator-form { width: 100%; }
.fe-flow .eval-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; width: 100%; box-sizing: border-box; min-height: 96px;
  background: #EEF2FF; border: 1.5px dashed #C7D2FE; border-radius: 12px;
  padding: 1.3rem 1rem; color: #3730A3; font-size: .87rem; font-weight: 600; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.fe-flow .eval-upload:hover { border-color: #4F46E5; background: #E0E7FF; }
.fe-flow .eval-upload svg { width: 24px; height: 24px; stroke: #4F46E5; fill: none; stroke-width: 2; }
.fe-flow .eval-upload input[type=file] { display: none; }
.fe-flow .eval-verification-box { margin-top: 1rem; }
.fe-flow .eval-field { margin-bottom: .6rem; }
.fe-flow .eval-field label { display: block; font-size: .85rem; font-weight: 600; color: #0F172A; margin-bottom: .4rem; }
.fe-flow .eval-code-btn {
  width: 100%; box-sizing: border-box; min-height: 46px;
  background: #4F46E5; color: #fff; border: 1px solid #4F46E5; border-radius: 10px;
  padding: .7rem 1rem; font-family: inherit; font-size: .87rem; font-weight: 600; cursor: pointer;
}
.fe-flow .eval-code-btn:hover { background: #4338CA; }
.fe-flow .eval-choice-row {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; margin-top: 1rem;
}
@media (max-width: 520px) { .fe-flow .eval-choice-row { grid-template-columns: 1fr; } }
.fe-flow .eval-primary, .fe-flow .eval-secondary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; min-height: 46px;
  border-radius: 10px; padding: .7rem 1rem;
  font-family: inherit; font-size: .86rem; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
}
.fe-flow .eval-primary { background: #4F46E5; color: #fff; border: 1px solid #4F46E5; }
.fe-flow .eval-primary:hover:not(:disabled) { background: #4338CA; }
.fe-flow .eval-primary:disabled { background: #E2E8F0; border-color: #E2E8F0; color: #94A3B8; cursor: not-allowed; }
.fe-flow .eval-secondary { background: #fff; color: #0F172A; border: 1px solid #CBD5E1; }
.fe-flow .eval-secondary:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.fe-flow .eval-secondary.eval-disabled-link { opacity: .5; pointer-events: none; }
.fe-flow .eval-status { margin-top: .9rem; font-size: .86rem; }
.fe-flow .eval-verified-message { color: #065F46; font-size: .85rem; font-weight: 600; margin-top: .6rem; }
.fe-flow .sample-report-links { margin-top: 1rem; font-size: .82rem; color: #64748B; }
.fe-flow .sample-report-links a { color: #4F46E5; font-weight: 600; margin-left: .4rem; }



/* ===========================================================================
   SAMPLE REPORT VIEWER

   Reports are self-contained HTML with their own <style>, so they are shown in
   an iframe rather than inlined — otherwise their CSS would fight the page's.
   Swapping a file in samples/ updates every page that shows it.

   The frame is a fixed-height scroll window with a fade at the foot so it is
   obvious there is more to read, plus an expand control and a full-tab link.
   =========================================================================== */
.sm-report { margin: 1.5rem 0 0; }

.sm-report-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  background: #0F172A; color: #fff;
  border: 1px solid #0F172A; border-bottom: none;
  border-radius: 14px 14px 0 0; padding: .9rem 1.15rem;
}
.sm-report-id { min-width: 0; }
.sm-report-id b { display: block; font-size: .92rem; font-weight: 650; letter-spacing: -.01em; }
.sm-report-id span { font-size: .78rem; color: #94A3B8; }
.sm-report-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sm-report-actions button, .sm-report-actions a {
  font: 600 .78rem/1 'Inter', system-ui, sans-serif;
  padding: .5rem .85rem; border-radius: 8px; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff;
  transition: background .16s, border-color .16s;
}
.sm-report-actions button:hover, .sm-report-actions a:hover {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4);
}
.sm-report-actions .sm-primary { background: #4F46E5; border-color: #4F46E5; }
.sm-report-actions .sm-primary:hover { background: #6366F1; border-color: #6366F1; }

/* the scroll window */
.sm-report-shell {
  position: relative;
  border: 1px solid #E2E8F0; border-top: none; border-radius: 0 0 14px 14px;
  background: #fff; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 14px 34px rgba(15,23,42,.07);
}
.sm-report-frame {
  display: block; width: 100%; height: 820px; border: 0; background: #fff;
  transition: height .3s cubic-bezier(.2,.7,.3,1);
}
.sm-report.is-open .sm-report-frame { height: 2400px; }
@media (max-width: 640px) {
  .sm-report-frame { height: 560px; }
  .sm-report.is-open .sm-report-frame { height: 1600px; }
}

/* fade + hint at the foot, hidden once expanded */
.sm-report-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 78%);
  pointer-events: none; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: .7rem; transition: opacity .25s;
}
.sm-report-fade span {
  pointer-events: none; font: 600 .75rem/1 'Inter', system-ui, sans-serif;
  color: #64748B; background: #F1F5F9; border: 1px solid #E2E8F0;
  padding: .4rem .8rem; border-radius: 99px;
}
.sm-report.is-open .sm-report-fade { opacity: 0; }

.sm-report-note {
  margin-top: .75rem; font-size: .77rem; line-height: 1.65; color: #64748B;
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 9px; padding: .7rem .9rem;
}
.sm-report-note strong { color: #334155; }

/* a compact row of "other samples in this discipline" */
.sm-more { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.sm-more a {
  font-size: .78rem; font-weight: 600; color: #4F46E5; text-decoration: none;
  background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 8px; padding: .45rem .8rem;
}
.sm-more a:hover { background: #E0E7FF; }

/* ---- the sample shown as a headline feature, high on the page ---------- */
.sm-feature {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border: 1px solid #E2E8F0; border-radius: 18px;
  padding: 1.6rem 1.6rem 1.8rem; margin: 0 0 2.2rem;
}
@media (max-width: 640px) { .sm-feature { padding: 1.1rem 1rem 1.3rem; border-radius: 14px; } }
.sm-feature-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .3rem; }
.sm-feature h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.3rem !important; font-weight: 650; letter-spacing: -.025em;
  color: #0F172A; margin: 0 0 .35rem !important;
}
.sm-feature > p { font-size: .92rem; line-height: 1.7; color: #475569; margin: 0 0 .2rem; max-width: 640px; }
.sm-feature .sm-report { margin-top: 1.2rem; }
.sm-feature-flag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857;
  font-size: .74rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px;
  white-space: nowrap;
}

/* ===========================================================================
   HOW IT WORKS — 01 / 02 / 03, with an animated pipeline in step 02.

   The pipeline is a DEMONSTRATION of what the engine does after an upload.
   It is labelled as such on the page. It is not a live run and it is not
   connected to any backend — it is CSS and a timer.
   =========================================================================== */
.hw { margin: 2.4rem 0; }
.hw-step { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 1.1rem; position: relative; }
.hw-step + .hw-step { margin-top: 1.1rem; }
.hw-step::before {
  content: ""; position: absolute; left: 30px; top: 62px; bottom: -1.1rem;
  width: 2px; background: #E2E8F0;
}
.hw-step:last-child::before { display: none; }
@media (max-width: 560px) {
  .hw-step { grid-template-columns: 44px minmax(0,1fr); gap: .8rem; }
  .hw-step::before { left: 21px; top: 46px; }
}

.hw-num {
  width: 62px; height: 62px; border-radius: 14px;
  background: #fff; border: 1px solid #E2E8F0;
  display: flex; align-items: center; justify-content: center;
  font: 700 1.02rem/1 'Inter', system-ui, sans-serif; color: #4F46E5;
  position: relative; z-index: 1;
}
@media (max-width: 560px) { .hw-num { width: 44px; height: 44px; border-radius: 11px; font-size: .88rem; } }

.hw-body { padding-top: .35rem; min-width: 0; }
.hw-body h3 {
  font: 650 1.02rem/1.35 'Inter', system-ui, sans-serif; color: #0F172A;
  margin: 0 0 .3rem; letter-spacing: -.02em;
}
.hw-body > p { font-size: .89rem; line-height: 1.7; color: #475569; margin: 0 0 .8rem; }
.hw-kicker {
  font: 700 .68rem/1 'Inter', system-ui, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #94A3B8; margin-bottom: .3rem; display: block;
}

/* ---- the pipeline ------------------------------------------------------ */
.hw-pipe {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 14px;
  padding: 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.hw-pipe-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.hw-live {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #EEF2FF; border: 1px solid #C7D2FE; color: #4338CA;
  font: 700 .68rem/1 'Inter', system-ui, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px;
}
.hw-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #4F46E5; display: block;
  animation: hw-blink 1.4s ease-in-out infinite;
}
@keyframes hw-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.hw-pipe-count { font: 600 .78rem/1 'Inter', system-ui, sans-serif; color: #64748B; }

.hw-bar { height: 5px; border-radius: 99px; background: #E2E8F0; overflow: hidden; margin-bottom: 1rem; }
.hw-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #4F46E5; transition: width .5s ease; }

.hw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hw-list li {
  display: grid; grid-template-columns: 22px minmax(0,1fr); gap: .65rem; align-items: start;
  font-size: .87rem; line-height: 1.5; color: #94A3B8; transition: color .3s;
}
.hw-list li b { font-weight: 500; }
.hw-tick {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #E2E8F0;
  background: #fff; position: relative; transition: background .3s, border-color .3s;
}
.hw-tick::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.hw-list li.is-active { color: #0F172A; }
.hw-list li.is-active .hw-tick { border-color: #4F46E5; }
.hw-list li.is-done { color: #334155; }
.hw-list li.is-done .hw-tick { background: #10B981; border-color: #10B981; }
.hw-list li.is-done .hw-tick::after { transform: rotate(45deg) scale(1); }

.hw-ticker {
  margin-top: .95rem; padding-top: .8rem; border-top: 1px solid #E2E8F0;
  font: 400 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #94A3B8;
  min-height: 1.2em;
}
.hw-note { font-size: .75rem; color: #94A3B8; margin: .7rem 0 0; }

/* ---- step 03 deliverables --------------------------------------------- */
.hw-gets { display: grid; gap: .5rem; }
.hw-get {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: .6rem; align-items: start;
  font-size: .88rem; line-height: 1.6; color: #334155;
}
.hw-get span:first-child { color: #10B981; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .hw-live i { animation: none; }
  .hw-bar i, .hw-tick, .hw-tick::after, .hw-list li { transition: none !important; }
}

/* ===========================================================================
   HERO — engines and the four steps side by side, above the fold.

   Compact by design: the whole point is that a visitor sees all five checks
   without scrolling, so the headline, the grid and the step rail share one
   viewport. Everything below is for people who want more.
   =========================================================================== */
.av-hero-compact { padding: 1.9rem 0 2.2rem; background: linear-gradient(180deg,#F8FAFC 0%,#FFF 70%); border-bottom: 1px solid #E2E8F0; }
.av-hero-compact .av-h1 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); margin: .75rem 0 .6rem; }
.av-hero-compact .av-sub { font-size: .95rem; margin-bottom: 1.1rem; max-width: 760px; }
.av-hero-head { text-align: center; max-width: 820px; margin: 0 auto 1.6rem; }
.av-hero-head .av-trust { justify-content: center; margin-top: .9rem; }

.av-stage { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1.4rem; align-items: start; }
@media (max-width: 1040px) { .av-stage { grid-template-columns: 1fr; } }

/* the engine card holding the 2x2 grid */
.av-engine-card { background:#fff; border:1px solid #E2E8F0; border-radius:18px; padding:1.35rem;
  box-shadow:0 2px 6px rgba(15,23,42,.06),0 16px 40px rgba(15,23,42,.08); }
@media (max-width: 640px) { .av-engine-card { padding:1rem; border-radius:14px; } }

/* denser tiles so four fit in a viewport */
.av-engine-card .fe-sq { padding: 1rem 1.05rem; border-radius: 12px; }
.av-engine-card .fe-sq h2 { font-size: .95rem; }
.av-engine-card .fe-desc { font-size: .795rem; line-height: 1.55; margin-bottom: .75rem; }
.av-engine-card .fe-btn { min-height: 42px; font-size: .805rem; padding: .5rem .8rem; }
.av-engine-card .fe-samples { margin-top: .6rem; padding-top: .6rem; font-size: .73rem; }
.av-engine-card .fe-grid { gap: .8rem; }

/* ---- the step rail ---------------------------------------------------- */
.av-steps-rail { background:#0F172A; border-radius:18px; padding:1.35rem 1.25rem; color:#fff; position:sticky; top:1rem; }
@media (max-width: 1040px) { .av-steps-rail { position: static; } }
.av-steps-rail h2 { font:650 .98rem/1.3 'Inter',system-ui,sans-serif; color:#fff; margin:0 0 .25rem; letter-spacing:-.02em; }
.av-steps-rail > p { font-size:.79rem; color:#94A3B8; margin:0 0 1.1rem; line-height:1.55; }

.av-srow { display:grid; grid-template-columns:34px minmax(0,1fr); gap:.75rem; position:relative; padding-bottom:1.05rem; }
.av-srow:last-child { padding-bottom:0; }
.av-srow::before { content:""; position:absolute; left:16px; top:36px; bottom:2px; width:2px; background:rgba(255,255,255,.12); }
.av-srow:last-child::before { display:none; }
.av-sicon {
  width:34px; height:34px; border-radius:10px; background:rgba(79,70,229,.22);
  border:1px solid rgba(129,140,248,.45); display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.av-sicon svg { width:16px; height:16px; stroke:#A5B4FC; fill:none; stroke-width:1.9; }
.av-srow b { display:block; font:600 .855rem/1.35 'Inter',system-ui,sans-serif; color:#fff; margin-bottom:.12rem; }
.av-srow span { display:block; font-size:.775rem; line-height:1.55; color:#94A3B8; }
.av-steps-foot { margin-top:1.1rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.12); font-size:.74rem; color:#94A3B8; line-height:1.55; }

/* ===========================================================================
   GUARANTEES — the promises, stated plainly and repeated near every CTA.
   =========================================================================== */
.gu { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.9rem; margin:1.6rem 0; }
.gu-item { background:#fff; border:1px solid #E2E8F0; border-radius:12px; padding:1.05rem 1.15rem;
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:.7rem; align-items:start; }
.gu-ic { width:26px; height:26px; border-radius:7px; background:#ECFDF5; border:1px solid #A7F3D0;
  display:flex; align-items:center; justify-content:center; }
.gu-ic svg { width:14px; height:14px; stroke:#047857; fill:none; stroke-width:2.4; }
.gu-item b { display:block; font:600 .87rem/1.35 'Inter',system-ui,sans-serif; color:#0F172A; margin-bottom:.15rem; }
.gu-item span { display:block; font-size:.8rem; line-height:1.6; color:#475569; }

.gu-strip { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; margin-top:1.1rem;
  font-size:.79rem; color:#475569; }
.gu-strip span { display:inline-flex; align-items:center; gap:.4rem; }
.gu-strip b { color:#047857; font-weight:700; }

/* ---------------------------------------------------------------------------
   HERO — tightened so the engine squares reach the first screen.
   The headline earns its space; nothing else in the hero should.
   --------------------------------------------------------------------------- */
.av-hero-compact { padding: 1.1rem 0 1.5rem; }
.av-hero-compact .av-h1 { font-size: clamp(1.55rem, 2.7vw, 2.15rem); margin: .6rem 0 .5rem; line-height: 1.12; }
.av-hero-head { margin-bottom: 1.1rem; }
.av-hero-compact .av-badge { font-size: .7rem; padding: .3rem .7rem; }
.av-hero-compact .av-trust { margin-top: .7rem; gap: 1.1rem; font-size: .78rem; row-gap: .4rem; }

/* the engine card carries the weight now, so it starts tighter too */
.av-engine-card { padding: 1.15rem; }
.av-engine-head { margin-bottom: 1rem; padding-bottom: .8rem; }
.av-engine-head h2 { font-size: 1.02rem; }
.av-engine-head p { font-size: .8rem; }
.av-engine-card .fe-sq { padding: .9rem .95rem; }
.av-engine-card .fe-sq h2 { font-size: .91rem; }
.av-engine-card .fe-desc { font-size: .775rem; line-height: 1.5; margin-bottom: .65rem; }
.av-engine-card .fe-btn { min-height: 40px; font-size: .785rem; }
.av-engine-card .fe-grid { gap: .7rem; }
.av-engine-card .fe-samples { margin-top: .55rem; padding-top: .55rem; font-size: .715rem; }

.av-steps-rail { padding: 1.15rem 1.1rem; }
.av-steps-rail h2 { font-size: .94rem; }
.av-steps-rail > p { font-size: .765rem; margin-bottom: .9rem; }
.av-srow { padding-bottom: .85rem; }
.av-srow b { font-size: .825rem; }
.av-srow span { font-size: .755rem; }

@media (max-width: 640px) {
  .av-hero-compact { padding: .9rem 0 1.2rem; }
  .av-hero-compact .av-trust { font-size: .74rem; gap: .8rem; }
}

/* ---------------------------------------------------------------------------
   The hero badge is gone — the announce bar above already says the same thing.
   The headline now starts the page, so it needs no top offset of its own.
   --------------------------------------------------------------------------- */
.av-hero-compact .av-hero-head .av-h1 { margin-top: 0; }
.av-hero-compact { padding-top: 1.6rem; }
@media (max-width: 640px) { .av-hero-compact { padding-top: 1.1rem; } }


/* ---------------------------------------------------------------------------
   Homepage sample report — additions for the REAL report block.

   The homepage panel used to hold a hand-written mock-up. It now holds verbatim
   output from the premium Evaluator, which needed three things the mock did not:
     .av-io-label      the engine's Issue / Solution labels
     .av-report-clip   a clipped height, so two findings read as "the opening of
                       a report" rather than as the whole of a short one
     .av-report-fade   the gradient that makes the cut deliberate, not broken
   Height is generous on desktop and shorter on mobile, where the same text runs
   far longer. Nothing here is used anywhere else, so it cannot affect the
   engine panels or the service pages.
   --------------------------------------------------------------------------- */
.av-report-live {
  margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #047857; background: #ECFDF5;
  border: 1px solid #A7F3D0; border-radius: 5px; padding: .2rem .5rem;
}
.av-finding.is-ok { border-left-color: #10B981; }

.av-io-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin: .1rem 0 .35rem;
}
.av-io-issue { color: #B45309; }
.av-io-fix   { color: #4338CA; margin-top: .7rem; }

.av-report-clip { position: relative; max-height: 760px; overflow: hidden; }
.av-report-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 82%);
}
@media (max-width: 640px) { .av-report-clip { max-height: 620px; } }