/* ==========================================================================
   MARKETING AUTOMATION — /marketing-automation
   Design: assets/html/marketing_automation_v3 (3).html, .tma- namespace.

   Loaded via $pageStyles in marketing-automation.php. There is deliberately NO
   page script: the mock's only JS was an IntersectionObserver adding `.in`, and
   assets/js/main.js already runs one for the site-wide .reveal class — which is
   guarded by html.has-js, so content stays visible if JS never runs. Every
   `.in` selector from the mock is therefore `.is-visible` here.

   Everything is prefixed. The standalone file styled `*`, `body` and `a`
   globally and shipped its own :root palette; left as-is those would reach the
   shared header, footer and lead-form modal, and a second near-identical
   palette on :root is how pages start looking subtly unlike each other.

   BREAKPOINTS — 1023 / 767 / 639px, exact complements of Tailwind's lg / md /
   sm (min-width 1024 / 768 / 640), matching products.css. The mock's own
   900 / 800 / 560 / 500 each fired at their own moment; 800 in particular sat
   32px past `md`, so between 768 and 800 the nav had already switched to its
   mobile button while this page still laid out for desktop.
   ========================================================================== */

/* Page-local tokens. The mock's palette is the site's palette warmed a few
   percent (#F5F3ED vs --surface #F6F6F4, #E4E1D7 vs --line #E4E4E0, teal
   #14B8A6 vs --accent #28AA8E), so those four read from :root in style.css
   instead of being restated here. Only the values the site has no token for —
   the dark slabs and the failure red — are literals. */
.tma-page{
  --tma-bg:        var(--surface);
  --tma-bg-2:      var(--white);
  --tma-ink:       var(--ink);
  --tma-ink-2:     #1A1A1A;
  --tma-mute:      var(--ink-soft);
  --tma-mute-2:    var(--muted);
  --tma-line:      var(--line);
  --tma-line-2:    #D8D6CE;
  --tma-card:      var(--white);
  --tma-dark:      #0F0F10;
  --tma-dark-2:    #131316;
  --tma-teal:      var(--accent);
  --tma-teal-glow: rgba(40,170,142,.18);
  --tma-warn:      #EB6A5A;

  /* Clearance for the fixed 76px nav. The hero's floating cards are absolutely
     positioned against this section, so padding alone would not move them —
     every `top` below is measured from here. */
  --tma-hero-top: 96px;

  background:var(--tma-bg);
  color:var(--tma-ink);
  letter-spacing:-.011em;
  line-height:1.5;

  /* clip, not hidden: the sticky product cards further down would stop sticking
     inside an ancestor that scrolls, and overflow:hidden makes one. */
  overflow-x:clip;
}
/* The mock leaned on a global `* { margin:0 }` reset, which would have reached
   the shared header and footer. This is the part of it this page actually
   needs; anchors already inherit their colour from Tailwind's preflight, and
   restating that here as `.tma-page a` outranked .tma-btn and painted the
   hero's primary button black-on-black. */
.tma-page :where(h1,h2,h3,h4,p){margin:0}

/* ---------- buttons ----------
   Named .tma-btn rather than reusing style.css's .btn: this page's buttons are
   12px-radius and Inter 500, where the site's are pill-shaped. */
.tma-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-weight:500;font-size:14.5px;
  padding:13px 22px;border-radius:12px;
  border:1px solid var(--tma-ink);background:var(--tma-ink);color:#fff;
  cursor:pointer;
  transition:translate .15s, background .15s, border-color .15s;
}
/* `translate`, never `transform`: style.css owns transform on anything
   carrying .reveal, and a hover lift written as transform would be undone the
   moment the reveal transition lands. */
.tma-btn:hover{translate:0 -1px;background:var(--tma-ink-2)}
.tma-btn--ghost{background:transparent;color:var(--tma-ink);border-color:var(--tma-line-2)}
.tma-btn--ghost:hover{background:rgba(0,0,0,.04);border-color:var(--tma-ink)}
.tma-btn--lg{padding:15px 26px;font-size:15px}
.tma-btn--inv{background:#fff;color:var(--tma-ink);border-color:#fff}
.tma-btn--inv:hover{background:#EAEAEA;border-color:#EAEAEA}

/* ==========================================================================
   HERO
   ========================================================================== */
.tma-hero{
  position:relative;
  padding:calc(var(--tma-hero-top) + 60px) 32px 100px;
  max-width:1400px;margin:0 auto;
  min-height:90vh;
}
.tma-hero::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  translate:-50% 0;
  width:900px;height:500px;
  background:radial-gradient(ellipse 60% 50% at 50% 30%, var(--tma-teal-glow), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
  opacity:.5;
}

.tma-hero__wire{
  position:absolute;
  top:var(--tma-hero-top);left:0;right:0;
  height:200px;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.tma-hero__wire svg{width:100%;height:100%;overflow:visible}
.tma-wire-path{
  stroke:var(--tma-line-2);
  stroke-width:1;
  fill:none;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:tma-draw-wire 2.2s cubic-bezier(.16,1,.3,1) .3s forwards;
}
@keyframes tma-draw-wire{to{stroke-dashoffset:0}}

/* the packet running down the wire */
.tma-wire-dot{
  fill:var(--tma-teal);
  filter:drop-shadow(0 0 6px var(--tma-teal));
  animation:tma-travel-dot 8s cubic-bezier(.65,0,.35,1) 2.6s infinite;
}
@keyframes tma-travel-dot{
  0%{transform:translate(0,0);opacity:0}
  5%{opacity:1}
  30%{transform:translate(260px,40px)}
  55%{transform:translate(560px,40px)}
  80%{transform:translate(860px,40px)}
  95%{opacity:1}
  100%{transform:translate(1160px,40px);opacity:0}
}

.tma-wire-node{
  fill:var(--tma-bg);
  stroke:var(--tma-line-2);
  stroke-width:1;
  opacity:0;
  animation:tma-node-in .5s ease forwards;
}
.tma-wire-node--1{animation-delay:.6s}
.tma-wire-node--2{animation-delay:1.1s}
.tma-wire-node--3{animation-delay:1.6s}
@keyframes tma-node-in{to{opacity:1}}

.tma-badge{
  position:absolute;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--tma-bg-2);
  border:1px solid var(--tma-line-2);
  padding:5px 11px;
  border-radius:999px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;
  color:var(--tma-ink);
  letter-spacing:.05em;
  text-transform:uppercase;
  z-index:2;
  opacity:0;
  animation:tma-badge-in .6s cubic-bezier(.16,1,.3,1) forwards;
}
.tma-badge i{width:12px;height:12px;display:grid;place-items:center;color:var(--tma-teal)}
.tma-badge svg{width:12px;height:12px}
.tma-badge--1{top:calc(var(--tma-hero-top) + 34px);left:10%;animation-delay:.4s}
.tma-badge--2{top:calc(var(--tma-hero-top) + 92px);left:32%;animation-delay:.9s}
.tma-badge--3{top:calc(var(--tma-hero-top) + 92px);left:58%;animation-delay:1.4s}
.tma-badge--4{top:calc(var(--tma-hero-top) + 92px);right:8%;animation-delay:1.9s}
@keyframes tma-badge-in{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

.tma-chat{
  position:absolute;
  top:calc(var(--tma-hero-top) + 90px);left:8%;
  width:250px;
  background:var(--tma-card);
  border:1px solid var(--tma-line-2);
  border-radius:14px;
  padding:14px 16px;
  font-size:14px;line-height:1.5;
  color:var(--tma-ink);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.1);
  z-index:3;
  opacity:0;
  animation:tma-card-in .8s cubic-bezier(.16,1,.3,1) 1s forwards;
}
.tma-chat p{padding-right:30px;padding-bottom:6px}
.tma-chat__send{
  position:absolute;bottom:12px;right:12px;
  width:26px;height:26px;border-radius:8px;
  background:var(--tma-ink);color:#fff;
  display:grid;place-items:center;font-size:12px;
}

.tma-workflow{
  position:absolute;
  top:calc(var(--tma-hero-top) + 128px);left:35%;
  width:220px;
  display:flex;flex-direction:column;gap:5px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  z-index:2;
  opacity:0;
  animation:tma-card-in .8s cubic-bezier(.16,1,.3,1) 1.3s forwards;
}
.tma-wf{
  padding:5px 12px;
  background:var(--tma-bg-2);
  border:1px solid var(--tma-line);
  border-radius:999px;
  display:flex;align-items:center;gap:8px;
  color:var(--tma-ink);
}
.tma-wf--done i{
  width:12px;height:12px;border-radius:999px;background:var(--tma-teal);
  display:grid;place-items:center;
  color:#fff;font-size:8px;font-style:normal;
}
.tma-wf--pending{color:var(--tma-mute)}
.tma-wf--pending i{
  width:10px;height:10px;border-radius:999px;
  border:1.5px solid var(--tma-mute-2);
  animation:tma-spin 1.5s linear infinite;
}
@keyframes tma-spin{to{transform:rotate(360deg)}}

.tma-decision{
  position:absolute;
  top:calc(var(--tma-hero-top) + 128px);left:60%;
  width:240px;
  display:flex;flex-direction:column;gap:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  z-index:2;
  opacity:0;
  animation:tma-card-in .8s cubic-bezier(.16,1,.3,1) 1.6s forwards;
}
.tma-dec{
  display:flex;align-items:flex-start;gap:8px;
  color:var(--tma-ink);
  line-height:1.45;
}
.tma-dec i{
  width:14px;height:14px;flex-shrink:0;
  display:grid;place-items:center;
  color:var(--tma-mute);
  margin-top:2px;
}
.tma-dec i svg{width:14px;height:14px}
.tma-dec--dim{color:var(--tma-mute-2)}

.tma-variant{
  position:absolute;
  top:calc(var(--tma-hero-top) + 152px);right:3%;
  width:220px;
  background:var(--tma-dark);
  border-radius:16px;
  color:#fff;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.25);
  overflow:hidden;
  z-index:3;
  opacity:0;
  animation:tma-card-in .8s cubic-bezier(.16,1,.3,1) 1.9s forwards;
}
.tma-variant__img{
  height:130px;
  background:radial-gradient(ellipse at top, #3A3A3F 0%, #1A1A1C 60%, #0A0A0A 100%);
  position:relative;
}
.tma-variant__img::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(45deg, transparent 40%, rgba(40,170,142,.15) 50%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.08), transparent 40%);
}
.tma-variant__body{padding:12px 14px 14px}
.tma-variant__t{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.tma-variant__d{font-size:11px;color:rgba(255,255,255,.6);margin-top:4px;line-height:1.4}
.tma-variant__btn{
  display:inline-block;
  background:rgba(255,255,255,.1);
  padding:5px 11px;
  border-radius:6px;
  font-size:11px;margin-top:10px;
  color:#fff;
}
@keyframes tma-card-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.tma-hero__copy{
  max-width:720px;
  position:relative;
  z-index:2;
  padding-top:240px;
}
.tma-hero__copy h1{
  font-size:clamp(56px,8vw,128px);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:.92;
  margin-bottom:32px;
}
.tma-hero__copy h1 span{display:block}
.tma-hero__sub{
  font-size:17px;color:var(--tma-mute);max-width:460px;
  line-height:1.55;margin-bottom:34px;
}
.tma-hero__ctas{display:flex;gap:10px;flex-wrap:wrap}

/* Below `md` the floating cards are gone, so the headline moves up to where
   they were. */
@media (max-width:1023px){
  .tma-hero__wire,.tma-chat,.tma-workflow,.tma-decision,.tma-variant,.tma-badge{display:none}
  .tma-hero{min-height:auto;padding-top:calc(var(--tma-hero-top) + 20px)}
  .tma-hero__copy{padding-top:40px}
}
@media (max-width:767px){
  .tma-hero{padding-left:20px;padding-right:20px;padding-bottom:60px}
}

/* ==========================================================================
   DARK NARRATIVE
   ========================================================================== */
.tma-slab{
  background:var(--tma-dark);
  color:#fff;
  padding:120px 32px;
  position:relative;
  overflow:hidden;
}
.tma-slab::before{
  content:"";
  position:absolute;
  top:-100px;left:-100px;
  width:500px;height:500px;
  background:radial-gradient(circle, var(--tma-teal-glow), transparent 60%);
  filter:blur(60px);
  pointer-events:none;
  opacity:.4;
}
.tma-slab__inner{
  max-width:1200px;margin:0 auto;
  position:relative;z-index:1;
}
.tma-slab__head{
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;margin-bottom:60px;
  align-items:end;
}
.tma-slab__head h2{
  font-size:clamp(44px,6vw,84px);
  font-weight:500;
  letter-spacing:-.045em;line-height:.95;
}
.tma-slab__head h2 span{color:rgba(255,255,255,.4)}
.tma-slab__body{
  color:rgba(255,255,255,.65);
  font-size:16px;line-height:1.6;
  max-width:460px;
}
.tma-slab__body p + p{margin-top:14px}
@media (max-width:767px){
  .tma-slab{padding:80px 20px}
  .tma-slab__head{grid-template-columns:1fr;gap:30px}
}

/* ---------- the messy journey ---------- */
.tma-viz{
  background:var(--tma-dark-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  padding:40px;
  position:relative;
  overflow:hidden;
}
.tma-viz__t{
  font-size:15px;color:rgba(255,255,255,.75);
  margin-bottom:32px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tma-viz__t .tma-warn{color:var(--tma-warn);font-weight:500}
.tma-viz__t .tma-good{color:var(--tma-teal);font-weight:500}

.tma-viz__dots{
  position:absolute;
  inset:80px 40px 40px 40px;
  background-image:radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
  z-index:0;
}
.tma-viz__lines{position:relative;z-index:1;height:260px}
.tma-viz__lines svg{width:100%;height:100%;overflow:visible}

/* Chaotic paths draw in, then glitch. Every animation on both visualisations
   waits for .is-visible (assets/js/main.js) — starting a 4-second sequence
   above the fold means the story has already finished by the time it's read. */
.tma-chaos-path{
  stroke:rgba(255,255,255,.35);
  stroke-width:1.2;
  fill:none;
  stroke-dasharray:3000;
  stroke-dashoffset:3000;
}
.tma-viz.is-visible .tma-chaos-path{
  animation:tma-chaos-draw 2.5s cubic-bezier(.16,1,.3,1) forwards, tma-chaos-glitch 4s ease-in-out infinite 2.5s;
}
.tma-viz.is-visible .tma-chaos-path:nth-of-type(1){animation-delay:0s,2.5s}
.tma-viz.is-visible .tma-chaos-path:nth-of-type(2){animation-delay:.3s,2.8s}
.tma-viz.is-visible .tma-chaos-path:nth-of-type(3){animation-delay:.6s,3.1s}
@keyframes tma-chaos-draw{to{stroke-dashoffset:0}}
@keyframes tma-chaos-glitch{
  0%,100%{opacity:.35}
  25%{opacity:.15}
  50%{opacity:.5}
  75%{opacity:.2}
}

.tma-chaos-device{
  fill:rgba(255,255,255,.85);
  opacity:0;
  transform-origin:center;
}
.tma-viz.is-visible .tma-chaos-device{
  animation:tma-device-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.tma-viz.is-visible .tma-chaos-device:nth-of-type(1){animation-delay:1.2s}
.tma-viz.is-visible .tma-chaos-device:nth-of-type(2){animation-delay:1.4s}
.tma-viz.is-visible .tma-chaos-device:nth-of-type(3){animation-delay:1.6s}
.tma-viz.is-visible .tma-chaos-device:nth-of-type(4){animation-delay:1.8s}
.tma-viz.is-visible .tma-chaos-device:nth-of-type(5){animation-delay:2s}
.tma-viz.is-visible .tma-chaos-device:nth-of-type(6){animation-delay:2.2s}
.tma-viz.is-visible .tma-chaos-device:nth-of-type(7){animation-delay:2.4s}
@keyframes tma-device-pop{
  0%{opacity:0;transform:scale(0)}
  60%{opacity:1;transform:scale(1.2)}
  100%{opacity:1;transform:scale(1)}
}

.tma-chaos-x{
  stroke:var(--tma-warn);
  stroke-width:2.2;
  stroke-linecap:round;
  fill:none;
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
}
.tma-viz.is-visible .tma-chaos-x{
  animation:tma-x-pop .5s ease forwards, tma-x-shake 1.2s ease-in-out infinite;
}
/* 4–7, not 1–4: :nth-of-type counts <path> elements, and the three chaos paths
   are paths too. The mock indexed these from 1, which matched nothing — all
   four crosses popped at once, before the journeys they mark had finished
   drawing. */
.tma-viz.is-visible .tma-chaos-x:nth-of-type(4){animation-delay:2.6s,3.1s}
.tma-viz.is-visible .tma-chaos-x:nth-of-type(5){animation-delay:2.8s,3.3s}
.tma-viz.is-visible .tma-chaos-x:nth-of-type(6){animation-delay:3s,3.5s}
.tma-viz.is-visible .tma-chaos-x:nth-of-type(7){animation-delay:3.2s,3.7s}
@keyframes tma-x-pop{
  0%{opacity:0;transform:scale(0) rotate(-90deg)}
  60%{opacity:1;transform:scale(1.3) rotate(0)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes tma-x-shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-1px,1px)}
  40%{transform:translate(1px,-1px)}
  60%{transform:translate(-1px,-1px)}
  80%{transform:translate(1px,1px)}
}

/* ---------- the clean journey ---------- */
.tma-viz--clean{
  background:linear-gradient(160deg, var(--tma-dark-2) 0%, var(--tma-dark) 100%);
  margin-top:24px;
  border-color:rgba(40,170,142,.15);
}
.tma-viz--clean::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:60%;height:100%;
  background:radial-gradient(ellipse, var(--tma-teal-glow), transparent 60%);
  filter:blur(40px);
  pointer-events:none;
  opacity:.5;
}
.tma-viz--clean .tma-viz__lines{height:220px}

.tma-persona-dot{
  fill:#fff;
  animation:tma-persona-pulse 2s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
.tma-persona-dot:nth-of-type(2){animation-delay:.5s}
.tma-persona-dot:nth-of-type(3){animation-delay:1s}
@keyframes tma-persona-pulse{
  0%,100%{r:6}
  50%{r:7}
}

.tma-clean-path{
  stroke:#fff;
  stroke-width:1.5;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
}
.tma-viz--clean.is-visible .tma-clean-path{
  animation:tma-clean-draw 2.5s cubic-bezier(.65,0,.35,1) forwards;
}
.tma-viz--clean.is-visible .tma-clean-path:nth-of-type(1){animation-delay:.3s}
.tma-viz--clean.is-visible .tma-clean-path:nth-of-type(2){animation-delay:.9s}
.tma-viz--clean.is-visible .tma-clean-path:nth-of-type(3){animation-delay:1.5s}
@keyframes tma-clean-draw{to{stroke-dashoffset:0}}

.tma-clean-pulse{
  fill:var(--tma-teal);
  filter:drop-shadow(0 0 8px var(--tma-teal));
  opacity:0;
}
.tma-viz--clean.is-visible .tma-clean-pulse--1{
  animation:tma-pulse-along-1 3.5s cubic-bezier(.65,0,.35,1) 3.5s infinite;
}
.tma-viz--clean.is-visible .tma-clean-pulse--2{
  animation:tma-pulse-along-2 3.5s cubic-bezier(.65,0,.35,1) 4s infinite;
}
@keyframes tma-pulse-along-1{
  0%{transform:translate(40px,40px);opacity:0}
  5%{opacity:1}
  18%{transform:translate(180px,40px)}
  30%{transform:translate(280px,20px)}
  45%{transform:translate(400px,20px)}
  55%{transform:translate(500px,55px)}
  70%{transform:translate(620px,55px)}
  85%{transform:translate(740px,30px)}
  95%{opacity:1}
  100%{transform:translate(840px,30px);opacity:0}
}
@keyframes tma-pulse-along-2{
  0%{transform:translate(40px,105px);opacity:0}
  5%{opacity:1}
  20%{transform:translate(200px,105px)}
  32%{transform:translate(280px,130px)}
  48%{transform:translate(420px,130px)}
  60%{transform:translate(500px,100px)}
  72%{transform:translate(620px,100px)}
  85%{transform:translate(740px,125px)}
  95%{opacity:1}
  100%{transform:translate(840px,125px);opacity:0}
}

/* line 3 is deliberately unfinished — a journey still in flight */
.tma-progress-ring{
  fill:none;
  stroke:var(--tma-teal);
  stroke-width:1.5;
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
}
.tma-progress-dot{
  fill:var(--tma-teal);
  filter:drop-shadow(0 0 6px var(--tma-teal));
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
}
.tma-viz--clean.is-visible .tma-progress-ring{
  animation:tma-ip-pop .5s ease 2.4s forwards, tma-ip-ring 2s ease-out 2.9s infinite;
}
.tma-viz--clean.is-visible .tma-progress-dot{
  animation:tma-ip-pop .5s ease 2.4s forwards, tma-ip-dot 1.4s ease-in-out 2.9s infinite;
}
@keyframes tma-ip-pop{
  0%{opacity:0;transform:scale(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes tma-ip-ring{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(1.8);opacity:0}
}
@keyframes tma-ip-dot{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.7)}
}

.tma-waypoint,.tma-channel{
  fill:#fff;
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
}
.tma-viz--clean.is-visible .tma-waypoint,
.tma-viz--clean.is-visible .tma-channel{animation:tma-wp-pop .4s ease forwards}

/* line 1 */
.tma-viz--clean.is-visible .tma-wp-1{animation-delay:.8s}
.tma-viz--clean.is-visible .tma-wp-2{animation-delay:1.1s}
.tma-viz--clean.is-visible .tma-wp-3{animation-delay:1.4s}
.tma-viz--clean.is-visible .tma-wp-4{animation-delay:1.7s}
.tma-viz--clean.is-visible .tma-wp-5{animation-delay:2s}
.tma-viz--clean.is-visible .tma-wp-6{animation-delay:2.3s}
/* line 2 */
.tma-viz--clean.is-visible .tma-wp-7{animation-delay:1.4s}
.tma-viz--clean.is-visible .tma-wp-8{animation-delay:1.7s}
.tma-viz--clean.is-visible .tma-wp-9{animation-delay:2s}
.tma-viz--clean.is-visible .tma-wp-10{animation-delay:2.3s}
.tma-viz--clean.is-visible .tma-wp-11{animation-delay:2.6s}
.tma-viz--clean.is-visible .tma-wp-12{animation-delay:2.9s}
/* line 3 */
.tma-viz--clean.is-visible .tma-wp-13{animation-delay:2s}
.tma-viz--clean.is-visible .tma-wp-14{animation-delay:2.2s}
@keyframes tma-wp-pop{
  0%{opacity:0;transform:scale(0)}
  60%{opacity:1;transform:scale(1.4)}
  100%{opacity:1;transform:scale(1)}
}

.tma-check{
  fill:var(--tma-teal);
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
  filter:drop-shadow(0 0 10px var(--tma-teal));
}
.tma-viz--clean.is-visible .tma-check--1{
  animation:tma-check-pop .7s cubic-bezier(.34,1.56,.64,1) 2.4s forwards, tma-check-glow 2.5s ease-in-out 3.1s infinite;
}
.tma-viz--clean.is-visible .tma-check--2{
  animation:tma-check-pop .7s cubic-bezier(.34,1.56,.64,1) 3s forwards, tma-check-glow 2.5s ease-in-out 3.7s infinite;
}
@keyframes tma-check-pop{
  0%{opacity:0;transform:scale(0) rotate(-90deg)}
  60%{opacity:1;transform:scale(1.3) rotate(10deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes tma-check-glow{
  0%,100%{filter:drop-shadow(0 0 10px var(--tma-teal))}
  50%{filter:drop-shadow(0 0 18px var(--tma-teal))}
}
.tma-tick{
  stroke:var(--tma-dark);
  stroke-width:2.2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:30;
  stroke-dashoffset:30;
}
.tma-viz--clean.is-visible .tma-tick--1{animation:tma-tick-draw .4s cubic-bezier(.65,0,.35,1) 2.9s forwards}
.tma-viz--clean.is-visible .tma-tick--2{animation:tma-tick-draw .4s cubic-bezier(.65,0,.35,1) 3.5s forwards}
@keyframes tma-tick-draw{to{stroke-dashoffset:0}}

/* ==========================================================================
   THE STACK
   ========================================================================== */
.tma-stack{
  max-width:1400px;margin:0 auto;
  padding:140px 32px;
  position:relative;
}
.tma-stack::before{
  content:"";
  position:absolute;
  top:50%;left:20%;
  width:400px;height:400px;
  background:radial-gradient(circle, var(--tma-teal-glow), transparent 60%);
  filter:blur(80px);
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
.tma-stack__grid{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:80px;align-items:start;
  position:relative;z-index:1;
}
.tma-stack__left{position:relative}
.tma-stack__left h2{
  font-size:clamp(44px,5.5vw,76px);
  font-weight:500;
  letter-spacing:-.04em;line-height:.98;
  margin-bottom:60px;
}

.tma-3d{
  position:relative;
  width:100%;
  max-width:560px;
  height:560px;
  margin:0 auto;
  perspective:1600px;
  perspective-origin:50% 30%;
  transform-style:preserve-3d;
}
.tma-3d__scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(56deg) rotateZ(-22deg);
  animation:tma-scene-breathe 8s ease-in-out infinite;
}
@keyframes tma-scene-breathe{
  0%,100%{transform:rotateX(56deg) rotateZ(-22deg)}
  50%{transform:rotateX(54deg) rotateZ(-24deg)}
}
.tma-3d:hover .tma-3d__scene{
  transform:rotateX(50deg) rotateZ(-25deg);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  animation:none;
}

.tma-layer{
  position:absolute;
  top:50%;left:50%;
  width:400px;height:400px;
  margin:-200px 0 0 -200px;
  border-radius:28px;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  box-shadow:0 30px 60px rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.12);
  opacity:0;
}
.tma-layer--1{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.05) 1.2px, transparent 1.2px),
    linear-gradient(160deg, #26262B 0%, #0E0E10 100%);
  background-size:14px 14px, 100% 100%;
  transform:translateZ(140px);
  animation:tma-float-1 5s ease-in-out infinite;
}
.tma-layer--2{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 1.2px, transparent 1.2px),
    linear-gradient(160deg, #3C3C40 0%, #1E1E20 100%);
  background-size:14px 14px, 100% 100%;
  transform:translateZ(70px);
  animation:tma-float-2 5s ease-in-out .6s infinite;
}
.tma-layer--3{
  background:linear-gradient(160deg, #FDFCF8 0%, #E8E5DA 100%);
  border:1px solid var(--tma-line-2);
  transform:translateZ(0);
  animation:tma-float-3 5s ease-in-out 1.2s infinite;
}

/* Entrance, once the stack scrolls into view. The .tma-3d element carries
   .reveal, so `is-visible` arrives from assets/js/main.js. */
.tma-3d.is-visible .tma-layer--3{animation:tma-enter-3 1.2s cubic-bezier(.16,1,.3,1) forwards, tma-float-3 5s ease-in-out 1.2s infinite}
.tma-3d.is-visible .tma-layer--2{animation:tma-enter-2 1.2s cubic-bezier(.16,1,.3,1) .2s forwards, tma-float-2 5s ease-in-out 1.4s infinite}
.tma-3d.is-visible .tma-layer--1{animation:tma-enter-1 1.2s cubic-bezier(.16,1,.3,1) .4s forwards, tma-float-1 5s ease-in-out 1.6s infinite}

@keyframes tma-enter-1{
  from{opacity:0;transform:translateZ(0) translateY(60px)}
  to{opacity:1;transform:translateZ(140px) translateY(0)}
}
@keyframes tma-enter-2{
  from{opacity:0;transform:translateZ(0) translateY(40px)}
  to{opacity:1;transform:translateZ(70px) translateY(0)}
}
@keyframes tma-enter-3{
  from{opacity:0;transform:translateZ(0) translateY(20px)}
  to{opacity:1;transform:translateZ(0) translateY(0)}
}
@keyframes tma-float-1{
  0%,100%{transform:translateZ(140px) translateY(0)}
  50%{transform:translateZ(140px) translateY(-8px)}
}
@keyframes tma-float-2{
  0%,100%{transform:translateZ(70px) translateY(0)}
  50%{transform:translateZ(70px) translateY(-5px)}
}
@keyframes tma-float-3{
  0%,100%{transform:translateZ(0) translateY(0)}
  50%{transform:translateZ(0) translateY(-3px)}
}

/* Hover spreads the layers apart; opacity stays put so a hover mid-entrance
   can't blank the stack. */
.tma-3d:hover .tma-layer--1{animation-play-state:paused;transform:translateZ(210px);opacity:1}
.tma-3d:hover .tma-layer--2{animation-play-state:paused;transform:translateZ(105px);opacity:1}
.tma-3d:hover .tma-layer--3{animation-play-state:paused;transform:translateZ(0);opacity:1}

.tma-layer--1::after{
  content:"";
  position:absolute;inset:0;
  border-radius:28px;
  background:linear-gradient(115deg, transparent 40%, rgba(40,170,142,.15) 50%, transparent 60%);
  animation:tma-sweep 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tma-sweep{
  0%,100%{opacity:0;transform:translateX(-100%)}
  50%{opacity:1;transform:translateX(100%)}
}

.tma-tiles{
  position:absolute;
  inset:50px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:18px;
  place-items:center;
  z-index:2;
}
.tma-tile{
  width:78px;height:78px;
  border-radius:18px;
  background:var(--tma-bg);
  display:grid;place-items:center;
  color:var(--tma-ink);
  box-shadow:0 8px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transform:rotate(var(--r,0deg)) scale(0);
  opacity:0;
}
.tma-tile svg{width:34px;height:34px}
.tma-tile--dark{background:var(--tma-ink);color:#fff;box-shadow:0 8px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1)}
.tma-tile--mid{background:linear-gradient(160deg, #6C6C72, #3D3D42);color:#fff}
.tma-tile--teal{background:var(--tma-teal);color:#fff;box-shadow:0 8px 16px rgba(40,170,142,.5), inset 0 1px 0 rgba(255,255,255,.2)}

.tma-3d.is-visible .tma-tile{
  animation:tma-tile-enter .6s cubic-bezier(.34,1.56,.64,1) forwards, tma-tile-float 4s ease-in-out infinite;
}
.tma-3d.is-visible .tma-tile:nth-child(1){--r:-6deg;animation-delay:1s,1.6s}
.tma-3d.is-visible .tma-tile:nth-child(2){--r:4deg;animation-delay:1.1s,1.7s}
.tma-3d.is-visible .tma-tile:nth-child(3){--r:-3deg;animation-delay:1.2s,1.8s}
.tma-3d.is-visible .tma-tile:nth-child(4){--r:5deg;animation-delay:1.3s,1.9s}
.tma-3d.is-visible .tma-tile:nth-child(5){--r:-4deg;animation-delay:1.4s,2s}
.tma-3d.is-visible .tma-tile:nth-child(6){--r:3deg;animation-delay:1.5s,2.1s}
.tma-3d.is-visible .tma-tile:nth-child(7){--r:-5deg;animation-delay:1.6s,2.2s}
.tma-3d.is-visible .tma-tile:nth-child(8){--r:4deg;animation-delay:1.7s,2.3s}
.tma-3d.is-visible .tma-tile:nth-child(9){--r:-3deg;animation-delay:1.8s,2.4s}
@keyframes tma-tile-enter{
  0%{transform:rotate(var(--r)) scale(0);opacity:0}
  60%{transform:rotate(var(--r)) scale(1.15);opacity:1}
  100%{transform:rotate(var(--r)) scale(1);opacity:1}
}
@keyframes tma-tile-float{
  0%,100%{transform:rotate(var(--r)) translateY(0)}
  50%{transform:rotate(calc(var(--r) + 2deg)) translateY(-4px)}
}

.tma-layer__label{
  position:absolute;
  bottom:24px;right:30px;
  color:rgba(255,255,255,.55);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  z-index:3;
}
.tma-layer--2 .tma-layer__label{color:rgba(255,255,255,.65)}
.tma-layer--3 .tma-layer__label{color:var(--tma-mute-2)}

.tma-stack__right{padding-top:20px}
.tma-stack__lede{
  font-size:20px;line-height:1.55;
  color:var(--tma-ink);
  margin-bottom:200px;
  max-width:420px;
}
.tma-stack__kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;letter-spacing:.06em;
  color:var(--tma-mute);text-transform:uppercase;
  margin-bottom:40px;
  line-height:1.5;
}
.tma-stack__products{display:flex;flex-direction:column;gap:32px}
.tma-sp{padding-left:20px;position:relative;max-width:420px}
.tma-sp::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:12px;background:var(--tma-ink);
}
.tma-sp--mid::before{background:repeating-linear-gradient(0deg, var(--tma-ink) 0 3px, transparent 3px 5px)}
.tma-sp--light::before{background:var(--tma-teal);width:5px;height:11px}
.tma-sp h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.tma-sp p{color:var(--tma-mute);font-size:14.5px;line-height:1.55}

@media (max-width:1023px){
  .tma-stack{padding:90px 20px}
  .tma-stack__grid{grid-template-columns:1fr;gap:40px}
  .tma-stack__lede{margin-bottom:30px}
  .tma-3d{max-width:480px;height:460px}
  .tma-layer{width:340px;height:340px;margin:-170px 0 0 -170px}
  .tma-tiles{inset:40px;gap:14px}
  .tma-tile{width:62px;height:62px}
}
@media (max-width:639px){
  .tma-3d{max-width:360px;height:380px}
  .tma-layer{width:260px;height:260px;margin:-130px 0 0 -130px}
  .tma-tiles{inset:30px;gap:10px}
  .tma-tile{width:46px;height:46px}
  .tma-tile svg{width:22px;height:22px}
  .tma-3d__scene{transform:rotateX(52deg) rotateZ(-20deg)}
  .tma-layer--1{animation:none;transform:translateZ(90px)}
  .tma-layer--2{animation:none;transform:translateZ(45px)}
  .tma-layer--3{animation:none;transform:translateZ(0)}
}

/* ==========================================================================
   PRODUCT DETAIL CARDS — a sticky stack
   ========================================================================== */
.tma-products{
  max-width:1200px;margin:0 auto;
  padding:60px 32px 30vh;      /* the tail is what gives the stack room to stick */
  display:flex;flex-direction:column;
  gap:24px;
  position:relative;
}
.tma-pd{
  border-radius:28px;
  padding:50px;
  display:grid;grid-template-columns:1.15fr 1fr 1fr;
  gap:40px;
  align-items:flex-start;
  position:sticky;
  will-change:transform;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.15);
}
/* Each card sticks lower than the one before it, so the card behind keeps
   showing an edge. The 40px head start clears the fixed nav. */
.tma-pd:nth-of-type(1){top:116px;z-index:1}
.tma-pd:nth-of-type(2){top:156px;z-index:2}
.tma-pd:nth-of-type(3){top:196px;z-index:3}

/* The entrance. Written against .has-js so the cards are simply visible if the
   script never runs, and at three classes it outranks style.css's
   `.has-js .reveal` transform without !important. */
.has-js .tma-pd.reveal{transform:translateY(60px) scale(.98)}
.has-js .tma-pd.reveal.is-visible{
  transform:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.has-js .tma-pd.reveal.is-visible:nth-of-type(2){transition-delay:.15s}
.has-js .tma-pd.reveal.is-visible:nth-of-type(3){transition-delay:.3s}

.tma-pd--dark{background:var(--tma-dark);color:#fff}
.tma-pd--mid{background:#2A2A2C;color:#fff}
.tma-pd--light{background:var(--tma-card);border:1px solid var(--tma-line);color:var(--tma-ink)}

.tma-pd__name{
  font-size:clamp(30px,3.5vw,44px);
  font-weight:500;letter-spacing:-.03em;line-height:1.05;
  margin-bottom:20px;
}
.tma-pd__desc{font-size:15.5px;line-height:1.6;opacity:.7;margin-bottom:24px}
.tma-pd__price,
.tma-pd__col{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  opacity:.55;margin-bottom:20px;
}
.tma-pd__cta{
  display:inline-block;padding:11px 22px;border-radius:10px;
  background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:500;
  transition:background .2s;
}
.tma-pd__cta:hover{background:rgba(255,255,255,.15)}
.tma-pd--light .tma-pd__cta{background:var(--tma-ink);color:#fff}
.tma-pd--light .tma-pd__cta:hover{background:var(--tma-ink-2)}

.tma-pd__list{display:flex;flex-direction:column;gap:14px}
.tma-pd__item{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;line-height:1.4;
}
.tma-pd__item i{
  flex-shrink:0;width:18px;height:18px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;
  font-size:10px;font-style:normal;
}
.tma-pd__item i.is-check{background:var(--tma-teal);color:#fff}
.tma-pd--light .tma-pd__item i{background:var(--tma-card);color:var(--tma-ink);border:1px solid var(--tma-line)}
.tma-pd--light .tma-pd__item i.is-check{background:var(--tma-teal);color:#fff;border:none}

@media (max-width:1023px){
  /* Three stacked sticky cards need more viewport than a phone has — below lg
     they simply flow. */
  .tma-products{padding:40px 20px 60px}
  .tma-pd{grid-template-columns:1fr;padding:36px 28px;gap:32px}
  .tma-pd:nth-of-type(1),
  .tma-pd:nth-of-type(2),
  .tma-pd:nth-of-type(3){position:relative;top:auto}
}

/* ==========================================================================
   PLAYBOOKS — bento grid
   ========================================================================== */
.tma-pb{
  max-width:1400px;margin:0 auto;
  padding:100px 32px 140px;
}
.tma-pb__head{margin-bottom:60px;max-width:800px}
.tma-pb__kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;color:var(--tma-mute);
  text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:20px;
}
.tma-pb__kicker::before{
  content:"";width:6px;height:6px;border-radius:999px;
  background:var(--tma-teal);box-shadow:0 0 8px var(--tma-teal);
}
.tma-pb__head h2{
  font-size:clamp(40px,5vw,68px);
  font-weight:500;
  letter-spacing:-.04em;line-height:1;
  margin-bottom:20px;
}
.tma-pb__head h2 span{color:var(--tma-mute-2);font-weight:400}
.tma-pb__head p{font-size:17px;color:var(--tma-mute);line-height:1.55;max-width:520px}

.tma-pb__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.tma-card{
  background:var(--tma-card);
  border:1px solid var(--tma-line);
  border-radius:24px;
  padding:30px;
  position:relative;
  overflow:hidden;
  transition:border-color .3s, translate .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  display:flex;flex-direction:column;
  min-height:320px;
}
.tma-card:hover{
  border-color:var(--tma-ink);
  translate:0 -3px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.15);
}
.tma-card--feature{border-color:var(--tma-teal)}
.tma-card--feature:hover{box-shadow:0 20px 40px -20px rgba(40,170,142,.3)}

.tma-card__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--tma-mute);
  padding:4px 10px;
  background:var(--tma-bg);
  border:1px solid var(--tma-line);
  border-radius:999px;
  align-self:flex-start;
  margin-bottom:16px;
}
.tma-card__tag i{
  width:5px;height:5px;border-radius:999px;
  background:var(--tma-teal);
  animation:tma-pulse-dot 2s ease-in-out infinite;
}
@keyframes tma-pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.6)}
}
.tma-card__name{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.tma-card__desc{font-size:14px;color:var(--tma-mute);line-height:1.5;margin-bottom:20px}
.tma-card__vis{
  margin-top:auto;margin-bottom:20px;
  flex:1;
  display:flex;align-items:flex-end;
}
.tma-card__meta{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;
  border-top:1px solid var(--tma-line);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;color:var(--tma-mute);
}
.tma-card__cta{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--tma-ink);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;
}
.tma-card__cta::after{content:"›";font-family:sans-serif;font-size:14px;transition:translate .2s}
.tma-card:hover .tma-card__cta::after{translate:3px 0}

.tma-card--w8{grid-column:span 8}
.tma-card--w6{grid-column:span 6}
.tma-card--w4{grid-column:span 4}

@media (max-width:1023px){
  .tma-pb{padding:70px 20px 90px}
  .tma-pb__grid{grid-template-columns:1fr 1fr}
  .tma-card--w8,.tma-card--w6,.tma-card--w4{grid-column:span 1}
}
@media (max-width:639px){
  .tma-pb__grid{grid-template-columns:1fr}
}

/* ---------- card visuals ---------- */
.tma-flow{display:flex;align-items:center;gap:6px;width:100%}
.tma-flow__node{
  background:var(--tma-bg);
  border:1px solid var(--tma-line);
  border-radius:8px;
  padding:6px 10px;
  font-size:11px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  white-space:nowrap;
}
.tma-flow__node--on{background:var(--tma-ink);color:#fff;border-color:var(--tma-ink)}
.tma-flow__node--done{background:var(--tma-teal);color:#fff;border-color:var(--tma-teal)}
.tma-flow__arrow{color:var(--tma-mute-2);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}

.tma-stat{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  width:100%;
  padding:24px;
  background:linear-gradient(135deg, #F7F5EE 0%, #EDE9D9 100%);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  min-height:160px;
}
.tma-stat::before{
  content:"";
  position:absolute;
  top:-50px;right:-50px;
  width:200px;height:200px;
  background:radial-gradient(circle, var(--tma-teal-glow), transparent 70%);
  filter:blur(20px);
}
.tma-stat__fig{position:relative;z-index:1}
.tma-stat__num{
  font-size:48px;font-weight:600;
  letter-spacing:-.03em;line-height:1;
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.tma-stat__lbl{
  font-size:12px;color:var(--tma-mute);margin-top:6px;
  text-transform:uppercase;letter-spacing:.1em;
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.tma-stat__chart{
  position:relative;z-index:1;
  flex:1;
  max-width:220px;
  height:100px;
}
/* Coloured here rather than with fill/stroke attributes, so the chart tracks
   --accent along with the rest of the page. */
.tma-stat__chart .tma-area{fill:url(#tma-chart-fill)}
.tma-stat__chart .tma-line{fill:none;stroke:var(--tma-teal);stroke-width:2}
.tma-stat__chart .tma-head{fill:var(--tma-teal)}
.tma-stat__chart .tma-stop-1{stop-color:var(--tma-teal);stop-opacity:.35}
.tma-stat__chart .tma-stop-2{stop-color:var(--tma-teal);stop-opacity:0}

.tma-people{display:flex;flex-direction:column;gap:6px;width:100%}
.tma-people__row{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;background:var(--tma-bg);
  border-radius:8px;
  font-size:11.5px;
}
.tma-people__av{
  width:20px;height:20px;border-radius:999px;
  background:var(--tma-ink);color:#fff;
  display:grid;place-items:center;
  font-size:9px;font-weight:600;flex-shrink:0;
}
.tma-people__dot{
  margin-left:auto;
  width:6px;height:6px;border-radius:999px;
  background:var(--tma-teal);
  animation:tma-pulse-dot 2s ease-in-out infinite;
}

.tma-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.tma-split__block{
  background:var(--tma-bg);
  border:1px solid var(--tma-line);
  border-radius:12px;
  padding:12px;
  display:flex;flex-direction:column;gap:6px;
}
.tma-split__lbl{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;color:var(--tma-mute);
  text-transform:uppercase;letter-spacing:.1em;
}
.tma-split__val{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:20px;font-weight:600;
  letter-spacing:-.02em;
}
.tma-split__block--win{background:var(--tma-teal);color:#fff;border-color:var(--tma-teal)}
.tma-split__block--win .tma-split__lbl{color:rgba(255,255,255,.7)}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.tma-cta{
  background:var(--tma-dark);
  color:#fff;
  padding:120px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.tma-cta::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--tma-teal-glow), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(255,255,255,.04), transparent 70%);
  pointer-events:none;
}
.tma-cta h2{
  font-size:clamp(48px,6vw,88px);
  font-weight:500;letter-spacing:-.045em;line-height:1;
  max-width:800px;margin:0 auto 22px;
  position:relative;z-index:1;
}
.tma-cta p{
  color:rgba(255,255,255,.65);font-size:17px;
  margin:0 auto 34px;max-width:520px;line-height:1.55;
  position:relative;z-index:1;
}
.tma-cta .tma-btn{position:relative;z-index:1}
@media (max-width:767px){
  .tma-cta{padding:80px 20px}
}

/* ==========================================================================
   REVEAL DELAYS
   The reveal itself is the site-wide .reveal (assets/js/main.js); these only
   stagger it. Scoped by .tma- prefix so they can't reach another page.
   ========================================================================== */
.reveal.tma-d1{transition-delay:.08s}
.reveal.tma-d2{transition-delay:.16s}
.reveal.tma-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  /* The journey visualisations are entirely animation — with motion off they
     have to be shown in their finished state rather than half-drawn. */
  .tma-page *{animation:none !important;transition:none !important}
  .tma-wire-path,.tma-chaos-path,.tma-clean-path,.tma-tick{stroke-dashoffset:0}
  .tma-chaos-device,.tma-chaos-x,.tma-waypoint,.tma-channel,
  .tma-check,.tma-progress-ring,.tma-progress-dot,
  .tma-badge,.tma-chat,.tma-workflow,.tma-decision,.tma-variant,
  .tma-layer,.tma-tile{opacity:1}
  .tma-tile{transform:rotate(var(--r,0deg)) scale(1)}
  .tma-layer--1{transform:translateZ(140px)}
  .tma-layer--2{transform:translateZ(70px)}
}