/* ============================================================
   OPTEAM — feature-page enhancement layer
   Richer, animated components layered on top of site.css.
   All classes are ft- namespaced to avoid clashes.
   ============================================================ */

/* ---- hero: floating live stat chips ---- */
.ft-herochips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ft-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark,rgba(245,238,226,.14));color:#EFE5D8;
  font-size:.85rem;font-weight:600;white-space:nowrap;
  animation:ftFloat 6s ease-in-out infinite}
.ft-chip:nth-child(2){animation-duration:5.2s;animation-delay:.5s}
.ft-chip:nth-child(3){animation-duration:6.6s;animation-delay:.9s}
.ft-chip b{color:var(--accent-2,#F39559)}
.ft-chip .d{width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent,#F26A1F);box-shadow:0 0 0 4px rgba(242,106,31,.2)}
.ft-chip .d.ok{background:#5ed39b;box-shadow:0 0 0 4px rgba(94,211,155,.18)}
@keyframes ftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---- feature-page hero: dynamic, on-brand motion (blueprint grid + ember glow + live sweep) ---- */
[data-page="features"] .page-hero{position:relative;overflow:hidden}
[data-page="features"] .page-hero>.wrap{position:relative;z-index:3}
[data-page="features"] .page-hero .lead{font-size:14px}
[data-page="features"] .page-hero .btn{font-size:14px}
[data-page="features"] .page-hero .glow{z-index:1;animation:fhBreathe 12s ease-in-out infinite alternate}
@keyframes fhBreathe{0%{opacity:.7;transform:translate(0,0) scale(1)}100%{opacity:1;transform:translate(-3%,2%) scale(1.12)}}
[data-page="features"] .page-hero::before{content:"";position:absolute;inset:-2px;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(245,238,226,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,238,226,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask:radial-gradient(125% 95% at 72% 0%,#000,transparent 72%);mask:radial-gradient(125% 95% at 72% 0%,#000,transparent 72%);
  animation:fhGrid 26s linear infinite}
@keyframes fhGrid{from{background-position:0 0,0 0}to{background-position:46px 46px,46px 46px}}
/* (removed) the diagonal half-width ember sweep band — replaced by the focused
   stage bloom in the v5 block below, so the canvas reads clean instead of half-lit */
[data-page="features"] .page-hero::after{content:none}
@keyframes fhSweep{0%{background-position:120% 0}100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){
  [data-page="features"] .page-hero .glow,
  [data-page="features"] .page-hero::before,
  [data-page="features"] .page-hero::after{animation:none}
}
@keyframes ftPop{0%{opacity:0;transform:translateY(16px) scale(.86)}60%{opacity:1;transform:translateY(-3px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ---- real-platform screenshot showcase ---- */
.ft-showcase{position:relative}
.ft-window{background:#fff;border:1px solid var(--line,#E6DCC9);border-radius:16px;overflow:hidden;
  box-shadow:0 50px 90px -44px rgba(20,12,4,.4);will-change:transform}
.ft-window .bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:var(--ink-2,#0B0806);border-bottom:1px solid rgba(245,238,226,.08)}
.ft-window .bar i{width:11px;height:11px;border-radius:50%;background:#3a342e;display:block}
.ft-window .bar i:first-child{background:#F26A1F}
.ft-window .bar .u{margin-left:14px;font-family:var(--font-mono,monospace);font-size:.66rem;letter-spacing:.06em;color:#8a8178}
.ft-window img{display:block;width:100%;height:auto}
.ft-showcase .ft-float{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:13px;
  background:#fff;border:1px solid var(--line,#E6DCC9);box-shadow:0 18px 40px -16px rgba(20,12,4,.34);
  font-size:.8rem;font-weight:600;color:var(--ink,#1A1613)}
.ft-showcase .ft-float .d{width:8px;height:8px;border-radius:50%;flex:none}
.ft-showcase .ft-float{opacity:1;z-index:4}
.ft-showcase .ft-float.tl{top:-18px;left:-18px;animation:ftFloat 6s ease-in-out infinite}
.ft-showcase .ft-float.br{bottom:-18px;right:-18px;animation:ftFloat 5.4s ease-in-out .6s infinite}
.ft-showcase .ft-float .d{position:relative}
.ft-showcase .ft-float .d::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ftDotPulse 2.4s ease-in-out infinite}
@keyframes ftDotPulse{0%{box-shadow:0 0 0 0 rgba(242,106,31,.45)}70%,100%{box-shadow:0 0 0 7px rgba(242,106,31,0)}}
@media (max-width:760px){.ft-showcase .ft-float{display:none}}

/* ---- numbered step timeline ---- */
.ft-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,28px);counter-reset:ft;perspective:1200px}
.ft-steps.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:880px){.ft-steps,.ft-steps.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ft-steps,.ft-steps.three{grid-template-columns:1fr}}
.ft-step{
  position:relative;padding:32px 26px 28px;
  background:linear-gradient(160deg,#fff 0%,#faf6ef 100%);
  border:1px solid var(--line,#E6DCC9);
  border-radius:20px;
  box-shadow:0 2px 0 0 rgba(242,106,31,.12),0 8px 24px -8px rgba(30,18,8,.10),0 1px 0 0 #fff inset;
  transform:translateY(0) rotateX(0);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1),border-color .25s;
  display:flex;flex-direction:column;
  will-change:transform;
}
.ft-step:hover{
  transform:translateY(-8px) rotateX(3deg);
  box-shadow:0 2px 0 0 rgba(242,106,31,.18),0 28px 56px -20px rgba(30,18,8,.18),0 1px 0 0 #fff inset;
  border-color:rgba(242,106,31,.35);
}
.ft-step::before{
  counter-increment:ft;
  content:counter(ft,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  font-family:var(--font-mono,monospace);font-weight:700;font-size:1.05rem;
  color:#fff;
  background:radial-gradient(circle at 35% 28%,#FF9B5C,#E2560F);
  box-shadow:0 10px 22px -8px rgba(242,106,31,.6),inset 0 1px 0 rgba(255,255,255,.38);
  margin-bottom:18px;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .3s;
  flex:none;
}
.ft-step:hover::before{
  transform:translateY(-3px) rotate(-6deg) scale(1.08);
  box-shadow:0 16px 30px -10px rgba(242,106,31,.7),inset 0 1px 0 rgba(255,255,255,.45);
}
.ft-step h3{font-size:1.12rem;letter-spacing:-.015em;margin-bottom:8px;color:var(--ink,#1A1613)}
.ft-step p{color:var(--text-2,#6B6157);font-size:.95rem;line-height:1.58;flex:1}
.ft-step .tick{display:none}
/* connector arrow between steps */
.ft-steps .ft-step:not(:last-child)::after{
  content:"";
  position:absolute;top:52px;right:-15px;
  width:28px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(242,106,31,.5) 0 5px,transparent 5px 10px);
  z-index:2;
}
@media(max-width:880px){.ft-steps .ft-step:not(:last-child)::after{display:none}}

/* ---- before / after compare ---- */
.ft-ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;perspective:1000px}
@media (max-width:680px){.ft-ba{grid-template-columns:1fr}}
.ft-ba .col{
  border-radius:22px;padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--line,#E6DCC9);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s;
}
.ft-ba .before{
  background:linear-gradient(155deg,#ede3d2 0%,#e3d5bf 100%);
  box-shadow:0 4px 0 #c9b99a,0 12px 32px -10px rgba(30,18,8,.12);
  transform:rotateY(2deg) rotateX(1deg);
}
.ft-ba .before:hover{transform:rotateY(0) rotateX(0) translateY(-4px);box-shadow:0 2px 0 #c9b99a,0 24px 48px -16px rgba(30,18,8,.16)}
.ft-ba .after{
  background:linear-gradient(155deg,#1e1410 0%,#0e0906 100%);
  color:#F4ECE2;border-color:transparent;
  box-shadow:0 4px 0 rgba(242,106,31,.3),0 12px 40px -10px rgba(242,106,31,.18),0 0 0 1px rgba(242,106,31,.18);
  transform:rotateY(-2deg) rotateX(1deg);
}
.ft-ba .after:hover{transform:rotateY(0) rotateX(0) translateY(-4px);box-shadow:0 2px 0 rgba(242,106,31,.4),0 28px 56px -14px rgba(242,106,31,.28),0 0 0 1px rgba(242,106,31,.3)}
.ft-ba .after h4,.ft-ba .after .row{color:#F4ECE2}
.ft-ba .hd{display:flex;align-items:center;gap:9px;font-family:var(--font-mono,monospace);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.ft-ba .before .hd{color:#a8331f}
.ft-ba .after .hd{color:var(--accent-2,#F39559)}
.ft-ba .row{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;padding:9px 0;border-top:1px solid rgba(0,0,0,.06)}
.ft-ba .after .row{border-top-color:rgba(255,255,255,.08)}
.ft-ba .row:first-of-type{border-top:none}
.ft-ba .row svg{width:18px;height:18px;flex:none;margin-top:2px}

/* ---- FAQ accordion (native details) ---- */
.ft-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ft-faq details{border:1px solid var(--line,#E6DCC9);border-radius:14px;background:var(--paper,#fff);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.ft-faq details[open]{border-color:var(--line-2,#d9cdb8);box-shadow:var(--shadow-sm,0 1px 2px rgba(40,25,10,.05))}
.ft-faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:1.04rem;color:var(--ink,#1A1613);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.ft-faq summary::-webkit-details-marker{display:none}
.ft-faq summary .pl{position:relative;width:18px;height:18px;flex:none}
.ft-faq summary .pl::before,.ft-faq summary .pl::after{content:"";position:absolute;background:var(--accent,#F26A1F);border-radius:2px;transition:transform .3s var(--ease,cubic-bezier(.4,0,.2,1))}
.ft-faq summary .pl::before{top:8px;left:0;width:18px;height:2px}
.ft-faq summary .pl::after{top:0;left:8px;width:2px;height:18px}
.ft-faq details[open] summary .pl::after{transform:rotate(90deg);opacity:0}
.ft-faq .ans{padding:0 22px 20px;color:var(--text-2,#6B6157);font-size:.98rem;line-height:1.6}

/* ---- dark CTA band ---- */
.ft-cta{background:var(--ink-2,#0B0806);color:#fff;text-align:center;position:relative;overflow:hidden}
.ft-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 380px at 50% -10%,rgba(242,106,31,.22),transparent 62%);pointer-events:none}
.ft-cta .wrap{position:relative}
.ft-cta h2{color:#fff;max-width:18ch;margin:0 auto}
.ft-cta p{color:rgba(245,238,226,.72);margin-top:14px}
.ft-cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---- animated bar/spark helpers (grow on reveal) ---- */
.ft-grow .gv{height:0;transition:height 1s var(--ease,cubic-bezier(.4,0,.2,1))}
.ft-grow.in .gv{height:var(--h,60%)}

/* reveal niceties for new blocks (in case site.css scope misses) */
[data-reveal].ft-r{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease,ease),transform .7s var(--ease,ease)}
[data-reveal].ft-r.in{opacity:1;transform:none}

/* ============================================================
   Feature pages — polish v2: depth, motion, modernity
   (scoped to [data-page="features"] so other pages are untouched)
   ============================================================ */

/* atmospheric section washes — kill the flatness */
[data-page="features"] .sec{position:relative}
[data-page="features"] .sec.cream-2::before,
[data-page="features"] .sec.ft-diff::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 400px at 86% -12%,rgba(242,106,31,.12),transparent 60%),
    radial-gradient(600px 340px at -4% 112%,rgba(199,133,61,.10),transparent 60%),
    linear-gradient(rgba(26,22,19,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,22,19,.028) 1px,transparent 1px);
  background-size:auto,auto,30px 30px,30px 30px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
[data-page="features"] .sec>.wrap{position:relative;z-index:1}

/* "Why it works" cards — dimensional + alive on hover */
[data-page="features"] .grid.cols-3 .card{transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s;will-change:transform}
[data-page="features"] .grid.cols-3 .card:hover{transform:translateY(-6px);border-color:rgba(242,106,31,.42);
  box-shadow:0 28px 54px -28px rgba(20,12,4,.32)}
[data-page="features"] .card .card-ico{transition:transform .35s var(--ease),box-shadow .3s}
[data-page="features"] .grid.cols-3 .card:hover .card-ico{transform:scale(1.08) rotate(-3deg);
  box-shadow:0 10px 22px -8px rgba(242,106,31,.45)}

/* numbered steps → real cards (cc-7, cc-3): rounded, centered badge, connector, lift */
[data-page="features"] .ft-steps{align-items:stretch}
[data-page="features"] .ft-step{padding:30px 24px 26px;background:linear-gradient(180deg,#fff,#FCF8F1);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 1px 2px rgba(40,25,10,.05);transition:transform .35s var(--ease),box-shadow .4s,border-color .3s;
  display:flex;flex-direction:column}
[data-page="features"] .ft-step::before{position:static;display:inline-flex;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#FF9B5C,#E2560F);color:#fff;align-items:center;justify-content:center;
  margin-bottom:18px;box-shadow:0 10px 22px -8px rgba(242,106,31,.6),inset 0 1px 0 rgba(255,255,255,.4);font-size:1.05rem}
[data-page="features"] .ft-step:hover{transform:translateY(-6px);border-color:rgba(242,106,31,.4);box-shadow:0 26px 50px -26px rgba(20,12,4,.34)}
[data-page="features"] .ft-step .tick{display:none}
/* connector line between step cards */
[data-page="features"] .ft-steps .ft-step:not(:last-child)::after{content:"";position:absolute;top:53px;right:-13px;width:26px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(242,106,31,.5) 0 5px,transparent 5px 10px);z-index:2}
@media(max-width:880px){[data-page="features"] .ft-steps .ft-step:not(:last-child)::after{display:none}}

/* by-the-numbers — 3-up centered, gradient figures, card depth (cc-9) */
[data-page="features"] .statband{grid-template-columns:repeat(3,1fr);max-width:980px;margin-inline:auto;gap:clamp(16px,2.4vw,30px)}
[data-page="features"] .statband .s{text-align:center;padding:30px 20px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,#fff,#FBF6EF);box-shadow:0 1px 2px rgba(40,25,10,.05);
  transition:transform .3s var(--ease),box-shadow .35s}
[data-page="features"] .statband .s:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(20,12,4,.3)}
[data-page="features"] .statband .s .n{background:linear-gradient(180deg,#FF8A45,#E2560F);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
[data-page="features"] .statband .s .l{margin-inline:auto;max-width:22ch}
@media (max-width:680px){[data-page="features"] .statband{grid-template-columns:1fr;max-width:380px}}

/* before / after — dramatic contrast, marker chips, center transition badge (cc-4, cc-8) */
.ft-ba{position:relative;align-items:stretch}
.ft-ba .col{transition:transform .35s var(--ease),box-shadow .4s;border-radius:20px;padding-top:30px}
.ft-ba .hd{font-size:.72rem}
.ft-ba .hd::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.ft-ba .before .hd::before{background:#c2553c;box-shadow:0 0 0 4px rgba(194,85,60,.16)}
.ft-ba .after .hd::before{background:var(--accent-2);box-shadow:0 0 0 4px rgba(242,106,31,.22)}
/* the "before" side reads weaker */
.ft-ba .before{background:linear-gradient(180deg,#F3E7DC,#EFE0D2);position:relative;overflow:hidden}
.ft-ba .before::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(380px 200px at 84% -10%,rgba(176,66,40,.12),transparent 64%)}
.ft-ba .before .row{color:#6e5f52}
/* the "after" side wins — dark, ember glow, slow sheen */
.ft-ba .after{position:relative;overflow:hidden;box-shadow:0 36px 70px -30px rgba(0,0,0,.6);border:1px solid rgba(242,106,31,.25)}
.ft-ba .after::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(440px 260px at 86% -10%,rgba(242,106,31,.34),transparent 62%)}
.ft-ba .after::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-16deg);animation:ftSweep2 7s ease-in-out 2s infinite}
@keyframes ftSweep2{0%{left:-60%}30%,100%{left:160%}}
.ft-ba .after>*{position:relative}
.ft-ba .col:hover{transform:translateY(-5px)}
.ft-ba .after:hover{box-shadow:0 44px 84px -30px rgba(0,0,0,.66),0 0 60px -20px rgba(242,106,31,.4)}
/* row marker chips */
.ft-ba .row{align-items:center;gap:13px}
.ft-ba .row svg{box-sizing:content-box;width:16px;height:16px;padding:7px;border-radius:50%;flex:none;margin-top:0}
.ft-ba .before .row svg{background:rgba(176,66,40,.12)}
.ft-ba .after .row svg{background:rgba(94,211,155,.14)}
/* center transition badge */
.ft-ba::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FF9B5C,#E2560F);
  box-shadow:0 12px 30px -8px rgba(242,106,31,.7),0 0 0 6px var(--cream),inset 0 1px 0 rgba(255,255,255,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:24px 24px}
@media(max-width:680px){.ft-ba::after{top:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E")}}
@media(prefers-reduced-motion:reduce){.ft-ba .after::after{animation:none}}

/* ── steps & before/after — refresh v3 (all feature pages) ── */
[data-page="features"] .ft-step{background:#fff;border-radius:20px;padding:34px 26px 28px}
[data-page="features"] .ft-step::before{width:54px;height:54px;border-radius:16px;font-size:1.2rem;font-weight:700;
  box-shadow:0 12px 26px -10px rgba(242,106,31,.7),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .4s var(--ease,cubic-bezier(.22,.61,.36,1))}
[data-page="features"] .ft-step:hover::before{transform:translateY(-3px) rotate(-5deg) scale(1.05)}
[data-page="features"] .ft-step h3{font-size:1.14rem;letter-spacing:-.01em}
[data-page="features"] .ft-step p{color:var(--muted);line-height:1.6}
[data-page="features"] .ft-steps .ft-step:not(:last-child)::after{top:61px;height:2px;background:repeating-linear-gradient(90deg,rgba(242,106,31,.55) 0 6px,transparent 6px 12px)}
.ft-ba .col{border-radius:22px}
.ft-ba .after{box-shadow:0 40px 80px -32px rgba(0,0,0,.66),0 0 0 1px rgba(242,106,31,.3)}
.ft-ba .after .hd{color:#ffd9b8}

/* FAQ — accent open state + smooth answer reveal (cc-11) */
[data-page="features"] .ft-faq details{transition:border-color .25s,box-shadow .25s,transform .25s}
[data-page="features"] .ft-faq details:hover{border-color:var(--line-2)}
[data-page="features"] .ft-faq details[open]{border-left:3px solid var(--accent);box-shadow:0 18px 40px -26px rgba(20,12,4,.22)}

/* ── hide "By the numbers" band on all feature pages ── */
[data-page="features"] .sec:has(.statband){display:none}

/* ── FAQ redesign — clean cards + animated +/× toggle (all feature pages) ── */
[data-page="features"] .ft-faq{display:flex;flex-direction:column;gap:12px;max-width:800px;margin-inline:auto}
[data-page="features"] .ft-faq details{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(40,25,10,.05);overflow:hidden;transition:transform .25s var(--ease,ease),box-shadow .3s,border-color .25s}
[data-page="features"] .ft-faq details:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 16px 34px -24px rgba(20,12,4,.26)}
[data-page="features"] .ft-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:1.04rem;color:var(--text);letter-spacing:-.01em}
[data-page="features"] .ft-faq summary::-webkit-details-marker{display:none}
[data-page="features"] .ft-faq .pl{position:relative;width:24px;height:24px;flex:none;border-radius:50%;background:rgba(242,106,31,.1);transition:background .25s}
[data-page="features"] .ft-faq .pl::before,[data-page="features"] .ft-faq .pl::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2.4px;border-radius:2px;background:var(--accent,#F26A1F);transform:translate(-50%,-50%);transition:transform .3s var(--ease,ease)}
[data-page="features"] .ft-faq .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
[data-page="features"] .ft-faq details[open]{border-color:rgba(242,106,31,.4);border-left:1px solid rgba(242,106,31,.4);box-shadow:0 20px 44px -26px rgba(20,12,4,.24)}
[data-page="features"] .ft-faq details[open] summary{color:var(--accent-ink)}
[data-page="features"] .ft-faq details[open] .pl{background:var(--accent)}
[data-page="features"] .ft-faq details[open] .pl::before,[data-page="features"] .ft-faq details[open] .pl::after{background:#fff}
[data-page="features"] .ft-faq details[open] .pl::after{transform:translate(-50%,-50%) rotate(0)}
[data-page="features"] .ft-faq .ans{padding:0 22px 20px;color:var(--muted);line-height:1.65;font-size:.98rem}
[data-page="features"] .ft-faq .ans{animation:ftFaqIn .35s var(--ease) both}
@keyframes ftFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* live screenshot — ken-burns drift on the image + glow + light sweep (cc-1, cc-3) */
[data-page="features"] .ft-showcase::before{content:"";position:absolute;inset:-6% -4% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 12%,rgba(242,106,31,.22),transparent 70%);filter:blur(8px)}
[data-page="features"] .ft-window{position:relative;z-index:1}
[data-page="features"] .ft-window img{animation:ftKen 20s ease-in-out infinite alternate;will-change:transform}
@keyframes ftKen{0%{transform:scale(1.02) translateY(0)}100%{transform:scale(1.08) translateY(-1.4%)}}
[data-page="features"] .ft-window::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-120%);animation:ftSweep 6.5s ease-in-out 1.2s infinite}
@keyframes ftSweep{0%{transform:translateX(-120%)}26%,100%{transform:translateX(120%)}}

/* chat / mock — float + a pulsing live dot so it feels live (cc-6) */
[data-page="features"] .two-col .mock{animation:ftFloat 8s ease-in-out infinite}
[data-page="features"] .mock-head .mi,[data-page="features"] .mwa-in::after{will-change:opacity}
[data-page="features"] .mprog .pr-bar i{animation:ftBar 4.2s var(--ease) infinite}
@keyframes ftBar{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}

@media (prefers-reduced-motion:reduce){
  [data-page="features"] .ft-window,[data-page="features"] .two-col .mock{animation:none}
  [data-page="features"] .ft-window img{animation:none}
  [data-page="features"] .ft-window::after,[data-page="features"] .mprog .pr-bar i{animation:none}
  [data-page="features"] .ft-window::after{display:none}
  .ft-showcase .ft-float.tl,.ft-showcase .ft-float.br{animation:none;opacity:1}
  .ft-showcase .ft-float .d::after{animation:none}
}

/* ============================================================
   Visual rhythm v3 — kill the "plain boxes" feel (cc: boring)
   Section-level backgrounds via :has(), richer cards, micro-motion.
   ============================================================ */

/* every section gets depth; none stays dead-flat white */
[data-page="features"] .sec{position:relative;overflow:hidden}
[data-page="features"] .sec:not(.cream-2)::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(700px 360px at 94% -8%,rgba(242,106,31,.05),transparent 58%),
             radial-gradient(560px 320px at -6% 108%,rgba(199,133,61,.045),transparent 60%)}
[data-page="features"] .sec>.wrap{position:relative;z-index:1}

/* "By the numbers" → striking dark band for contrast & rhythm */
[data-page="features"] .sec:has(.statband){background:linear-gradient(180deg,#100B07,#0B0806);color:#F4ECE2}
[data-page="features"] .sec:has(.statband)::after{background:radial-gradient(760px 400px at 50% -12%,rgba(242,106,31,.24),transparent 60%),
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px}
[data-page="features"] .sec:has(.statband) .h2{color:#fff}
[data-page="features"] .sec:has(.statband) .eyebrow{color:var(--accent-2)}
[data-page="features"] .sec:has(.statband) .statband .s{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.04)}
[data-page="features"] .sec:has(.statband) .statband .s:hover{box-shadow:0 26px 50px -26px rgba(0,0,0,.6),0 0 40px -18px rgba(242,106,31,.4)}
[data-page="features"] .sec:has(.statband) .statband .l{color:#B8AA9A}

/* richer cards — warm gradient fill + animated top accent on hover */
[data-page="features"] .grid.cols-3 .card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#FCF8F1)}
[data-page="features"] .grid.cols-3 .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
[data-page="features"] .grid.cols-3 .card:hover::before{transform:scaleX(1)}
[data-page="features"] .card .card-ico{background:linear-gradient(160deg,rgba(242,106,31,.14),rgba(242,106,31,.05));border:1px solid rgba(242,106,31,.2);color:var(--accent-ink)}

/* animated eyebrow tick — subtle breathing line */
[data-page="features"] .eyebrow .mark{animation:ftTick 3.4s var(--ease) infinite}
@keyframes ftTick{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(1.7);opacity:.7}}

/* live dashboard mock — pulsing "live" status + breathing figures */
[data-page="features"] .mock-head .mi{position:relative}
[data-page="features"] .mock-head .mi::after{content:"";position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;
  background:#5ed39b;box-shadow:0 0 0 0 rgba(94,211,155,.5);animation:ftLive 2s var(--ease) infinite}
@keyframes ftLive{0%{box-shadow:0 0 0 0 rgba(94,211,155,.5)}70%{box-shadow:0 0 0 7px rgba(94,211,155,0)}100%{box-shadow:0 0 0 0 rgba(94,211,155,0)}}
[data-page="features"] .mock .mini-card{transition:transform .3s var(--ease),box-shadow .3s}
[data-page="features"] .mock .mini-card:hover{transform:translateX(3px);box-shadow:-3px 0 0 0 var(--accent)}

@media (prefers-reduced-motion:reduce){
  [data-page="features"] .eyebrow .mark,[data-page="features"] .mock-head .mi::after{animation:none}
}

/* ============================================================
   v4 — steps + before/after refinement (all feature pages)
   Quieter, more editorial, design-system aligned: mono numerals,
   hairlines over glow, no animated sweeps competing with copy.
   ============================================================ */

/* ---- numbered steps → typographic, calm, sequential ---- */
[data-page="features"] .ft-steps{align-items:stretch;gap:clamp(16px,2vw,22px)}
[data-page="features"] .ft-step{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:28px 26px 26px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(40,25,10,.04);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
/* big mono numeral instead of a filled badge */
[data-page="features"] .ft-step::before{
  position:static;display:block;width:auto;height:auto;background:none;border-radius:0;box-shadow:none;margin:0 0 14px;
  font-family:var(--font-mono);font-weight:600;font-size:2.3rem;line-height:1;letter-spacing:-.02em;
  color:var(--accent);transition:transform .4s var(--ease)}
[data-page="features"] .ft-step h3{font-size:1.16rem;letter-spacing:-.015em;color:var(--text);margin-bottom:8px}
[data-page="features"] .ft-step p{color:var(--text-2);line-height:1.6;font-size:.97rem}
[data-page="features"] .ft-step:hover{transform:translateY(-5px);border-color:rgba(242,106,31,.4);
  box-shadow:0 24px 48px -28px rgba(20,12,4,.3)}
[data-page="features"] .ft-step:hover::before{transform:translateY(-2px)}
/* drop the old dotted connector + tick — quieter, card-led sequence */
[data-page="features"] .ft-steps .ft-step:not(:last-child)::after{content:none;display:none}
[data-page="features"] .ft-step .tick{display:none}

/* ---- before / after → one calm comparison, no glow soup ---- */
.ft-ba{position:relative;align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 24px 56px -34px rgba(20,12,4,.32)}
.ft-ba .col{border:0;border-radius:0;padding:clamp(26px,3vw,38px);transition:none}
.ft-ba .col:hover{transform:none}
/* before — muted parchment, reads as the "old way" */
.ft-ba .before{background:var(--cream-2)}
.ft-ba .before::before{display:none}
.ft-ba .before .hd{color:#a8331f}
.ft-ba .before .row{color:#7a6c5d}
/* after — dark, single soft ember wash, the resolved state */
.ft-ba .after{background:var(--ink-deep);border:0;
  box-shadow:none;position:relative;overflow:hidden}
.ft-ba .after::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 280px at 88% -12%,rgba(242,106,31,.18),transparent 64%)}
.ft-ba .after::after{display:none!important;animation:none!important;content:none}
.ft-ba .after .hd{color:var(--accent-2)}
.ft-ba .after .row{color:#EDE3D6}
.ft-ba .after>*{position:relative;z-index:1}
/* headers — mono eyebrow + status dot */
.ft-ba .hd{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;display:flex;align-items:center;gap:9px;margin-bottom:18px}
.ft-ba .hd::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.ft-ba .before .hd::before{background:#c2553c;box-shadow:0 0 0 4px rgba(194,85,60,.14)}
.ft-ba .after .hd::before{background:var(--accent);box-shadow:0 0 0 4px rgba(242,106,31,.2)}
/* rows — clean marker chips, hairline separators */
.ft-ba .row{display:flex;align-items:flex-start;gap:13px;font-size:1rem;line-height:1.5;
  padding:13px 0;border-top:1px solid rgba(26,22,19,.08)}
.ft-ba .after .row{border-top-color:rgba(245,238,226,.1)}
.ft-ba .row:first-of-type{border-top:0}
.ft-ba .row svg{box-sizing:content-box;width:15px;height:15px;padding:6px;border-radius:50%;
  flex:none;margin-top:1px}
.ft-ba .before .row svg{background:rgba(176,66,40,.12)}
.ft-ba .after .row svg{background:rgba(94,211,155,.16)}
/* centre seam + arrow chip — anchored at the column gap, top area (no copy overlap) */
.ft-ba::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(245,238,226,.18),transparent);z-index:2}
.ft-ba::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FF9B5C,#E2560F);
  box-shadow:0 10px 26px -8px rgba(242,106,31,.7),0 0 0 5px var(--cream-2),inset 0 1px 0 rgba(255,255,255,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:22px 22px}
@media (max-width:680px){
  .ft-ba::before{top:auto;bottom:auto;left:0;right:0;width:auto;height:1px;top:50%}
  .ft-ba::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E")}
}

/* ============================================================
   v5 — HEADER VISUALS: modern · dimensional · dynamic
   • removed the diagonal "half gradient" sweep (see ::after above)
   • clean, even canvas — one soft centred wash instead of a half-lit band
   • a focused 3D "stage": ambient ember bloom, reflective floor, depth
   • pointer-reactive parallax tilt (wired in chrome.js) for live motion
   (scoped to feature-page .aih heroes; other pages untouched)
   ============================================================ */

/* canvas — quiet the blueprint grid to a static texture, drop the marching motion */
[data-page="features"] .page-hero::before{opacity:.42;animation:none;
  -webkit-mask:radial-gradient(120% 100% at 62% 26%,#000,transparent 72%);
          mask:radial-gradient(120% 100% at 62% 26%,#000,transparent 72%)}

/* one soft, centred ember wash — atmospheric, NOT a half-screen band */
[data-page="features"] .page-hero.aih .glow{display:block;z-index:0;opacity:1;
  background:radial-gradient(1100px 640px at 52% -8%, rgba(242,106,31,.11), transparent 58%);
  animation:fhBreathe 16s ease-in-out infinite alternate}

/* the stage becomes a 3D platform with its own light + ground */
[data-page="features"] .aih .aih-stage{position:relative;perspective:1700px}
[data-page="features"] .aih .aih-stage > div{transition:transform .35s cubic-bezier(.22,.61,.36,1);will-change:transform}
/* focused ember bloom behind the visual (the new, local light source) */
[data-page="features"] .aih .aih-stage::before{content:"";position:absolute;z-index:-1;
  left:6%;right:-8%;top:2%;bottom:-2%;border-radius:50%;
  background:radial-gradient(56% 56% at 56% 44%, rgba(242,106,31,.36), rgba(242,106,31,.07) 58%, transparent 74%);
  filter:blur(30px);animation:aihBloom 9s ease-in-out infinite alternate}
@keyframes aihBloom{0%{transform:translate(0,0) scale(1);opacity:.85}100%{transform:translate(-2.5%,-3%) scale(1.09);opacity:1}}
/* reflective floor / contact shadow — grounds the floating composition */
[data-page="features"] .aih .aih-stage::after{content:"";position:absolute;z-index:-1;
  left:16%;right:8%;bottom:-3%;height:42px;
  background:radial-gradient(50% 130% at 50% 0%, rgba(0,0,0,.5), transparent 72%);
  filter:blur(11px)}

@media (max-width:960px){
  [data-page="features"] .aih .aih-stage::before{filter:blur(34px);opacity:.7}
  [data-page="features"] .aih .aih-stage::after{display:none}
  [data-page="features"] .aih .aih-stage > div{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  [data-page="features"] .page-hero.aih .glow,
  [data-page="features"] .aih .aih-stage::before{animation:none}
}

/* ============================================================
   RESPONSIVE POLISH — feature-page mobile fixes
   ============================================================ */

/* ≤ 680px: lift statband max-width so it fills the screen */
@media(max-width:680px){
  [data-page="features"] .statband{max-width:none}
}

/* ≤ 640px -------------------------------------------------- */
@media(max-width:640px){
  [data-page="features"] .ft-herochips{gap:7px}
  [data-page="features"] .ft-chip{font-size:.74rem;padding:7px 10px}
  [data-page="features"] .ft-step{padding:22px 18px 20px}
  [data-page="features"] .ft-step::before{font-size:1.8rem}
  .ft-ba .col{padding:22px 20px}
  /* hero CTA: stack buttons */
  .page-hero .aih-cta{flex-direction:column;align-items:flex-start}
  .page-hero .aih-cta .btn{width:100%;justify-content:center;box-sizing:border-box}
}

/* ≤ 520px -------------------------------------------------- */
@media(max-width:520px){
  /* statband: 2-col on feature pages (numbers read better side-by-side) */
  [data-page="features"] .statband{grid-template-columns:1fr 1fr}
  /* FAQ */
  [data-page="features"] .ft-faq summary{padding:15px 18px;font-size:.97rem}
  [data-page="features"] .ft-faq .ans{padding:0 18px 16px;font-size:.94rem}
  [data-page="features"] .page-hero .eyebrow{font-size:.65rem}
}

/* ≤ 400px -------------------------------------------------- */
@media(max-width:400px){
  [data-page="features"] .statband{grid-template-columns:1fr}
  .ft-ba .col{padding:18px 16px}
  [data-page="features"] .ft-step{padding:18px 14px 16px}
}


/* ============================================================
   VISUAL ENHANCEMENT — steps premium + before/after balance
   ============================================================ */

/* STEPS: premium gradient card with number chip + connector */
[data-page="features"] .ft-step{
  background:linear-gradient(160deg,#ffffff 0%,rgba(248,242,232,.65) 100%);
  border:1px solid rgba(230,218,202,.9);
  box-shadow:
    0 2px 0 rgba(242,106,31,.1),
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 16px -4px rgba(30,18,8,.06),
    0 10px 30px -10px rgba(30,18,8,.04)}
[data-page="features"] .ft-step::before{
  background:linear-gradient(135deg,rgba(255,155,92,.13) 0%,rgba(242,106,31,.07) 100%);
  border:1px solid rgba(242,106,31,.22);
  border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 12px;
  font-size:1.42rem;height:auto;width:auto;
  box-shadow:none;position:static;margin-bottom:20px}
[data-page="features"] .ft-step h3{font-weight:700}
[data-page="features"] .ft-step:hover{
  transform:translateY(-9px);
  border-color:rgba(242,106,31,.5);
  box-shadow:
    0 2px 0 rgba(242,106,31,.2),
    0 1px 0 rgba(255,255,255,.9) inset,
    0 32px 60px -22px rgba(242,106,31,.14),
    0 26px 44px -18px rgba(30,18,8,.18)}
/* re-enable connector dashes between cards */
[data-page="features"] .ft-steps .ft-step:not(:last-child)::after{
  display:block;content:"";position:absolute;
  top:34px;right:-13px;width:26px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(242,106,31,.5) 0 5px,transparent 5px 10px);
  z-index:2}
@media(max-width:880px){[data-page="features"] .ft-steps .ft-step:not(:last-child)::after{display:none}}

/* BEFORE/AFTER: remove residual 3D skew, improve visual weight */
.ft-ba .before,.ft-ba .after{transform:none!important}
.ft-ba .before{opacity:.9}
.ft-ba .after::before{
  background:radial-gradient(580px 320px at 86% -8%,rgba(242,106,31,.28),transparent 62%)}
.ft-ba .row{font-size:1.01rem;padding:14px 0}
.ft-ba .row svg{padding:7px}
/* badge ring: white instead of --cream-2 so it reads clean on both sides */
.ft-ba::after{box-shadow:0 10px 26px -8px rgba(242,106,31,.7),0 0 0 5px #fff,inset 0 1px 0 rgba(255,255,255,.4)}