/* 2026-09-23 legal audit: the brand green was used as TEXT (and as a fill under white
   text) below WCAG AA. --green-aa (#15803D) and --green-aa-deep (#11692F) exist for
   exactly this and are used here; the green FILLS that carry no text are untouched. */
/* ============================================================
   TaskLogix360 — Customer Story section (de-iframed embed)
   Source: embeds/wix-embed-testimonial.html · converted 2026-07-09
   Dark navy ground + interactive dot grid canvas; copy left,
   draggable BEFORE/AFTER wipe right. Pairs with
   sections/testimonial.html + assets/js/testimonial.js.

   Conversion notes / judgment calls:
   - Embed-local tokens NOT in tokens.css are defined on
     .tlx-testimonial below: --navy-900, --green-bright, --ink,
     --muted, --muted-dim, --line, --card. (--ink here is the
     dark-ground text color #EAF2FB and intentionally differs from
     the pricing section's light-ground --ink — hence local, not
     global.) --navy-900 is carried over from the embed's :root for
     1:1 fidelity though the embed only uses its value literally.
   - html/body rules dropped: iframe-era height:100%/overflow:hidden
     and min-height:100% removed; the dark background, font and ink
     color moved onto .tlx-testimonial so the section stays
     full-bleed dark on the light page.
   - ALL selectors scoped under .tlx-testimonial (not just bare
     elements): .eyebrow and .h2 collide with base.css primitives,
     and scoping everything both wins inside the section and stops
     leakage into the rest of the page.
   - container-type:inline-size + container-name:tlxtest sit on the
     section class, so the embed's cqw units and @container rule
     keep measuring the section.
   - Gradient hex values kept verbatim from the approved embed
     (fidelity over tokenization).
   ============================================================ */

.tlx-testimonial{
  /* embed-local tokens (see header) */
  --navy-900:#062A49;
  --green-bright:#1E9A44;
  --ink:#EAF2FB; --muted:#A6BCD6; --muted-dim:#7C93B0;
  --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.045);

  /* was html/body + .section in the embed */
  position:relative;overflow:hidden;
  font-family:var(--font);color:var(--ink);
  container-type:inline-size;container-name:tlxtest;
  background:
    radial-gradient(120% 90% at 82% -10%, #0E5188 0%, rgba(14,81,136,0) 55%),
    radial-gradient(90% 80% at 6% 110%, rgba(30,154,68,.12) 0%, rgba(30,154,68,0) 55%),
    linear-gradient(160deg, #0B4678 0%, #08365D 56%, #062A49 100%);
}
.tlx-testimonial .dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9}

.tlx-testimonial .wrap{
  position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:clamp(44px,6cqw,84px) clamp(20px,5cqw,64px);
  display:grid;grid-template-columns:1fr;gap:clamp(30px,4.5cqw,56px);align-items:center;
}
@container tlxtest (min-width:860px){ .tlx-testimonial .wrap{grid-template-columns:1fr 1fr} }

/* ===== Story (left) ===== */
.tlx-testimonial .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:clamp(13.5px,1.1cqw,14px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright);margin-bottom:clamp(16px,2cqw,22px)}
.tlx-testimonial .eyebrow .d{width:8px;height:8px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 10px rgba(30,154,68,.7)}
.tlx-testimonial .h2{margin:0 0 clamp(18px,2.4cqw,24px);font-weight:800;letter-spacing:-0.02em;line-height:1.13;font-size:clamp(28px,4.6cqw,46px);color:#fff}
.tlx-testimonial .lead{margin:0;max-width:46ch;font-size:clamp(15px,1.6cqw,18px);line-height:1.65;color:var(--muted)}
.tlx-testimonial .lead b{color:var(--ink);font-weight:600}

/* ===== Proof card (right) ===== */
.tlx-testimonial .card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,2.8cqw,30px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.tlx-testimonial .card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 32%)}
.tlx-testimonial .card > *{position:relative}

.tlx-testimonial .viz-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:clamp(14px,1.8cqw,18px)}
/* Type inside the proof card raised 2026-08-07 (Sam: "increase the text size
   inside the comparison element"). Everything here had been pinned at the
   13.5px floor, which reads as fine print next to a 60px stat. */
.tlx-testimonial .viz-title{font-size:clamp(14px,1.4cqw,16px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tlx-testimonial .viz-badge{font-size:clamp(24px,3.6cqw,38px);font-weight:800;letter-spacing:-0.03em;color:var(--green-bright);line-height:1;text-shadow:0 0 26px rgba(30,154,68,.3)}

/* ===== Before/After wipe ===== */
.tlx-testimonial .compare{
  position:relative;width:100%;height:clamp(210px,30cqw,280px);
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  user-select:none;-webkit-user-select:none;touch-action:none;cursor:ew-resize;
}
.tlx-testimonial .layer{position:absolute;inset:0}
.tlx-testimonial .layer.before{
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 26px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 100%,
    linear-gradient(160deg, #0C3A5E, #0A3151);
}
.tlx-testimonial .layer.after{
  clip-path:inset(0 0 0 50%);
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(30,154,68,.22), rgba(30,154,68,0) 55%),
    linear-gradient(160deg, #0E4D7C, #0B3D63);
}
.tlx-testimonial .tag{position:absolute;top:16px;font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.tlx-testimonial .tag.b{left:16px;color:#56697C}
.tlx-testimonial .tag.a{right:16px;color:var(--green-bright)}
.tlx-testimonial .cluster{position:absolute;top:50%;transform:translateY(-50%);max-width:62%}
.tlx-testimonial .cluster.b{left:clamp(16px,3cqw,26px);text-align:left}
.tlx-testimonial .cluster.a{right:clamp(16px,3cqw,26px);text-align:right}
.tlx-testimonial .stat-num{font-size:clamp(34px,6cqw,60px);font-weight:800;letter-spacing:-0.03em;line-height:1}
.tlx-testimonial .cluster.b .stat-num{color:#C9D6E6}
.tlx-testimonial .cluster.a .stat-num{color:var(--green-bright);text-shadow:0 0 30px rgba(30,154,68,.32)}
.tlx-testimonial .stat-lbl{margin-top:8px;font-size:15px;font-weight:600;letter-spacing:.03em;color:var(--muted)}

/* handle */
.tlx-testimonial .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.9);
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.45)}
.tlx-testimonial .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.4);color:#0B4678}
.tlx-testimonial .grip svg{width:20px;height:20px}
.tlx-testimonial .grip::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.55)}
.tlx-testimonial .compare.hint .grip::after{animation:gripPulse 2.1s var(--ease) infinite}
@keyframes gripPulse{0%{transform:scale(.85);opacity:.7}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}

.tlx-testimonial .drag-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;
  background:rgba(8,30,50,.7);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;letter-spacing:.05em;color:var(--ink);white-space:nowrap;
  transition:opacity .4s ease;pointer-events:none}
.tlx-testimonial .compare.touched .drag-hint{opacity:0}

.tlx-testimonial .viz-cap{margin-top:clamp(14px,1.8cqw,18px);font-size:clamp(14px,1.4cqw,16px);color:var(--muted-dim);text-align:center}
.tlx-testimonial .viz-cap .dotsep{opacity:.5;margin:0 .5em}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tlx-testimonial .anim{opacity:0;animation:fadeUp .6s var(--ease) forwards}
.tlx-testimonial .a1{animation-delay:.05s}.tlx-testimonial .a2{animation-delay:.15s}.tlx-testimonial .a3{animation-delay:.25s}.tlx-testimonial .a4{animation-delay:.4s}

@media (prefers-reduced-motion: reduce){ .tlx-testimonial .anim{opacity:1;animation:none} .tlx-testimonial .compare.hint .grip::after{animation:none} }