/* ============================================================
   VoiceX — Landing page editorial sections (index.html only)
   Uses tokens defined in light-theme.css (--forest, --cream,
   --primary, --font-display). Additive, does not touch nav/
   footer/buttons which are handled globally in light-theme.css.
   ============================================================ */

.ed-section{ padding:72px 0; }
.ed-container{ max-width:1320px; margin:0 auto; padding:0 32px; }
.ed-eyebrow{
  display:flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.ed-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); display:inline-block; }
.ed-h2{
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,2.2vw,2.2rem) !important;
  color:var(--ink); line-height:1.2 !important; letter-spacing:-.01em; margin-bottom:16px;
}
.ed-h2 em{ font-family:var(--font-display); font-style:italic; color:var(--primary); font-weight:500; }
.ed-p{ color:var(--muted); font-size:1.05rem; line-height:1.7; max-width:520px; }
.ed-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  color:var(--primary); font-weight:600; text-decoration:none; font-size:.95rem;
}
.ed-link i{ transition:transform .2s ease; }
.ed-link:hover i{ transform:translateX(3px); }
.ed-check{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:14px; }
.ed-check li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-weight:500; }
.ed-check li i{ color:var(--primary); margin-top:3px; }
.ed-check li small{ display:block; font-weight:400; color:var(--muted); font-size:.88rem; margin-top:2px; }

/* ---------- HERO ---------- */
.ed-hero{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  min-height:640px; background:var(--cream);
}
.ed-hero-left{ display:flex; flex-direction:column; justify-content:center; padding:60px 64px 60px 5vw; }
.ed-hero-left h1{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.015em;
  font-size:clamp(1.3rem,2.2vw,2.6rem) !important; line-height:1.15 !important; color:var(--ink); margin-bottom:26px;
}
.ed-hero-left h1 em{ font-style:italic; color:var(--primary); display:block; font-weight:500; }
.ed-hero-left p{ color:var(--muted); font-size:1.08rem; max-width:440px; line-height:1.7; margin-bottom:26px; }
.ed-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.ed-hero-right{ position:relative; overflow:hidden; min-height:420px; }
.ed-hero-right img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:991px){
  .ed-hero{ grid-template-columns:1fr; }
  .ed-hero-left{ padding:56px 24px 40px; }
  .ed-hero-right{ min-height:320px; order:-1; }
}

/* ---------- HERO / ECOSYSTEM DIVIDER ---------- */
.ed-divider{ max-width:1320px; margin:0 auto; padding:36px 32px; background:var(--cream); }
.ed-divider hr{ margin:0; border:none; border-top:1px solid var(--hairline); }

/* ---------- ECOSYSTEM / FLYWHEEL ---------- */
.ed-ecosystem{ background:var(--cream); text-align:center; }
.ed-ecosystem-head{ max-width:640px; margin:0 auto 8px; }
.ed-ecosystem-head .ed-eyebrow{ justify-content:center; }

/* Stage: everything is positioned relative to the illustration's own
   geometry, not stacked as independent image + text blocks. Node
   x-positions below were measured directly from the illustration's
   alpha channel after cropping it to its true content bounds (5
   platform centers at 11.3% / 27% / 45.3% / 68.8% / 89.7% of the
   cropped image width) so every caption lines up with its circle at
   any viewport width. */
.ed-flywheel-stage{
  position:relative;
  max-width:1180px;
  margin:36px auto 0;
  padding-top:122px;   /* room for the caption row anchored above the circles */
  padding-bottom:8px;
}
.ed-flywheel-stage img{ position:relative; width:100%; height:auto; display:block; z-index:2; }

/* decorative guide rings, centered on the hub (node 1) */
.ed-ring{
  position:absolute; border-radius:50%; border:1px solid var(--hairline);
  pointer-events:none; z-index:1;
}
.ed-ring--outer{ width:320px; height:320px; left:11.3%; top:64%; transform:translate(-50%,-50%); }
.ed-ring--inner{ width:215px; height:215px; left:11.3%; top:64%; transform:translate(-50%,-50%); border-color:rgba(193,85,44,0.22); }

/* the 4 anchored node captions (Vendor/Subscriber/Agents/Customers) —
   x positions measured directly from the illustration's alpha channel
   (circle centers at 27% / 45.3% / 68.8% / 89.7% of the cropped image
   width; the hub circle at 11.3% carries no caption — see
   .ed-platform-panel below instead) */
.ed-node{
  position:absolute; top:0; z-index:3;
  width:168px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.ed-node-2{ left:27%; } .ed-node-3{ left:45.3%; }
.ed-node-4{ left:68.8%; } .ed-node-5{ left:89.7%; }
.ed-node .dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); margin-bottom:10px; }
.ed-node .stub{ width:1px; flex:1; background:var(--hairline); margin-top:8px; min-height:34px; }
.ed-node strong{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink);
}
.ed-node span{ display:block; margin-top:6px; font-size:.78rem; line-height:1.4; color:var(--muted); }

/* "One Platform" editorial panel — NOT a flywheel node. Positioned as
   an absolute overlay against .ed-flywheel-stage (which already has
   position:relative) so it can sit close to the hub circle without
   the stage's own width/centering/scale changing at all: the stage
   stays exactly as wide and exactly as centered as before. On
   viewports too narrow to hold it in the left gutter without
   crowding the page edge, it drops below the min-width:1300px
   breakpoint and stacks above the flywheel instead (see media query
   below) — a deliberate trade-off, not an oversight: there is no
   width at which a real text block can sit outside a centered,
   fixed-width, unshifted flywheel on every screen size at once. */
.ed-platform-panel{
  position:absolute; z-index:3;
  right:100%; margin-right:16px;
  top:50%; transform:translateY(-50%);
  width:150px;
}
.ed-platform-panel strong{
  display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--primary); margin-bottom:8px;
}
.ed-platform-panel .tagline{ display:block; font-size:.8rem; line-height:1.45; color:var(--ink); margin-bottom:10px; }
.ed-platform-panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.ed-platform-panel ul li{ font-size:.78rem; color:var(--muted); line-height:1.4; }

@media (max-width:1300px){
  .ed-platform-panel{
    position:static; transform:none; width:auto; max-width:420px;
    margin:0 auto 28px; text-align:center;
  }
  .ed-platform-panel ul{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px 14px; }
}

.ed-flywheel-foot{ margin-top:8px; color:var(--muted); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.ed-flywheel-foot span{ display:block; margin-top:6px; text-transform:none; letter-spacing:normal; font-size:.95rem; }

@media (max-width:900px){
  .ed-ring{ display:none; }
  .ed-node{ width:120px; }
  .ed-node span{ display:none; }
  .ed-flywheel-stage{ padding-top:70px; }
}
@media (max-width:560px){
  .ed-flywheel-stage{ padding-top:0; margin-top:32px; }
  .ed-node{ position:static; transform:none; width:auto; display:inline-flex; flex-direction:row; gap:6px; margin:4px 8px; }
  .ed-node .stub{ display:none; }
  .ed-node .dot{ margin-bottom:0; }
  .ed-flywheel-nodes-mobile{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:18px; }

}

/* ---------- VENDOR (dark, split) ---------- */
.ed-vendor{ background:var(--forest); color:var(--cream); padding:0; }
.ed-vendor-grid{ display:grid; grid-template-columns:1fr 1fr; min-height:560px; align-items:stretch; }
.ed-vendor-text{ display:flex; flex-direction:column; justify-content:center; padding:60px 5vw 60px 5vw; }
.ed-vendor .ed-eyebrow{ color:rgba(245,240,228,.65); }
.ed-vendor .ed-eyebrow::before{ background:var(--primary-light); }
.ed-vendor-text h2{ color:#fff; }
.ed-vendor-text p{ color:rgba(245,240,228,.72); max-width:440px; }
.ed-vendor-text .ed-check li{ color:#fff; }
.ed-vendor-text .ed-check li small{ color:rgba(245,240,228,.62); }
.ed-vendor-text .ed-link{ color:var(--primary-light); }
.ed-vendor-img{ position:relative; min-height:420px; }
.ed-vendor-img img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:991px){ .ed-vendor-grid{ grid-template-columns:1fr; } .ed-vendor-text{ padding:56px 24px; } .ed-vendor-img{ min-height:320px; } }

/* ---------- SUBSCRIBER (light, split) ---------- */
.ed-subscriber{ background:var(--cream); }
.ed-subscriber-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.ed-subscriber-shot{ border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(22,38,29,0.18); border:1px solid var(--hairline); }
.ed-subscriber-shot img{ width:100%; display:block; }

@media (max-width:991px){ .ed-subscriber-grid{ grid-template-columns:1fr; } }

/* ---------- AGENTS ---------- */
.ed-agents{ background:var(--cream-soft); text-align:center; }
.ed-agents-head{ max-width:640px; margin:0 auto 32px; }
.ed-agents-head .ed-eyebrow{ justify-content:center; }
.ed-agents-head p{ margin:0 auto; }
.ed-agents-strip img{ width:100%; height:auto; display:block; border-radius:10px; }

/* ---------- POWER WITHOUT COMPLEXITY (dark, split — same pattern as .ed-vendor) ---------- */
.ed-power{ background:var(--forest); color:var(--cream); padding:0; }
.ed-power-grid{ display:grid; grid-template-columns:1fr 1fr; min-height:560px; align-items:stretch; }
.ed-power-text{ display:flex; flex-direction:column; justify-content:center; padding:60px 5vw 60px 5vw; }
.ed-power .ed-eyebrow{ color:rgba(245,240,228,.65); }
.ed-power .ed-eyebrow::before{ background:var(--primary-light); }
.ed-power-text h2{ color:#fff; }
.ed-power-text p.ed-p{ color:rgba(245,240,228,.72); max-width:460px; }
.ed-power-items{ display:grid; grid-template-columns:1fr 1fr; gap:28px 32px; margin-top:34px; }
.ed-power-items .num{ font-family:var(--font-display); font-size:1.3rem; color:rgba(245,240,228,.4); margin-bottom:8px; }
.ed-power-items h4{ font-family:var(--font-display); font-size:1.02rem; font-weight:500; color:#fff; margin-bottom:6px; }
.ed-power-items p{ color:rgba(245,240,228,.62); font-size:.85rem; line-height:1.55; }
.ed-power-img{ position:relative; min-height:420px; }
.ed-power-img img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:991px){ .ed-power-grid{ grid-template-columns:1fr; } .ed-power-text{ padding:56px 24px; } .ed-power-img{ min-height:320px; } }
@media (max-width:560px){ .ed-power-items{ grid-template-columns:1fr; } }

/* ---------- INTEGRATIONS TRUST STRIP ---------- */
.ed-integrations{ background:var(--cream); padding:26px 0 34px; }
.ed-integrations-head{ text-align:center; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.ed-integrations-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.ed-integrations-row .ed-logo{ display:flex; align-items:center; gap:8px; padding:0 26px; position:relative; }
.ed-integrations-row .ed-logo:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--hairline);
}
.ed-integrations-row .ed-logo svg{ height:22px; width:auto; display:block; }
.ed-integrations-row .ed-logo span{ font-size:1rem; font-weight:600; color:#3a3226; white-space:nowrap; }

@media (max-width:767px){
  .ed-integrations-row .ed-logo{ padding:8px 14px; }
  .ed-integrations-row .ed-logo:not(:last-child)::after{ display:none; }
}

/* ---------- PARTNERS / WHITE-LABEL ---------- */
.ed-partners{ background:var(--cream); position:relative; overflow:hidden; padding-bottom:230px; }
.ed-partners-top{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:end; margin-bottom:40px; }
.ed-partners-top p{ color:var(--muted); line-height:1.7; max-width:460px; }
.ed-partners-numbers{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative; z-index:2; }
.ed-partners-numbers .num{ font-family:var(--font-display); font-size:2.1rem; color:rgba(33,28,21,.28); margin-bottom:10px; }
.ed-partners-numbers h4{ font-family:var(--font-display); font-size:1.02rem; color:var(--ink); margin-bottom:8px; font-weight:500; }
.ed-partners-numbers p{ color:var(--muted); font-size:.88rem; line-height:1.55; }
/* Hero illustration, not a decorative thumbnail: 38% of the section
   width, full image (no cropping — the section now carries enough
   extra bottom padding above to guarantee the whole graphic fits),
   bleeding only past the page's right edge, sitting low/right like
   the approved mockup. */
.ed-partners-bg{ position:absolute; right:-48px; bottom:24px; width:38%; min-width:400px; max-width:820px; pointer-events:none; z-index:1; }
.ed-partners-bg img{ width:100%; display:block; }

@media (max-width:991px){ .ed-partners{ padding-bottom:104px; } .ed-partners-top{ grid-template-columns:1fr; } .ed-partners-numbers{ grid-template-columns:repeat(2,1fr); } .ed-partners-bg{ display:none; } }

/* ---------- FINAL CTA CARDS ---------- */
.ed-cta{ background:var(--cream-soft); text-align:center; }
.ed-cta-head{ max-width:640px; margin:0 auto 32px; }
.ed-cta-head .ed-eyebrow{ justify-content:center; }
.ed-cta-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; }
.ed-cta-card{ background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:32px; display:flex; flex-direction:column; }
.ed-cta-card .ic{ width:42px; height:42px; border-radius:10px; background:var(--cream); display:flex; align-items:center; justify-content:center; color:var(--primary); margin-bottom:20px; }
.ed-cta-card h4{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:8px; color:var(--ink); }
.ed-cta-card p{ color:var(--muted); font-size:.92rem; margin-bottom:18px; }
.ed-cta-card ul{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:8px; }
.ed-cta-card ul li{ font-size:.88rem; color:var(--ink); display:flex; gap:8px; align-items:center; }
.ed-cta-card ul li i{ color:var(--primary); }
.ed-cta-card .btn-primary-custom,
.ed-cta-card .btn-outline-custom{ margin-top:auto; text-align:center; }

@media (max-width:991px){ .ed-cta-cards{ grid-template-columns:1fr; } }

/* ============================================================
   MICRO-INTERACTION 1 — flywheel ecosystem walker
   Small businessman silhouette that travels hub -> vendor ->
   subscriber -> agent -> customer along the same node row as the
   existing captions, then resets. Purely additive: does not
   change .ed-flywheel-stage sizing, the PNG, or node positions.
   left-% values below are the exact same measured circle centers
   already used by .ed-node-2/3/4/5 and .ed-ring above, so the
   walker stays aligned with the illustration at any width.

   .ed-flywheel-visual wraps ONLY the PNG (no padding/margin of its
   own), so its box always exactly matches the image's box at every
   breakpoint. The walker's top:% is measured against this wrapper
   instead of the padded .ed-flywheel-stage — that stage's
   padding-top changes at 900px/560px (and the node captions switch
   to static/inline flow at 560px), so anything positioned as a %
   of the *stage* drifts vertically off the circle row at those
   breakpoints. Anchoring to the image's own box removes that
   dependency entirely; one top value now works everywhere. */
.ed-flywheel-visual{ position:relative; }

/* Single tunable nudge if the walker ever needs a small manual
   horizontal correction relative to the circle centers below —
   change this one value only, every keyframe reads it. */
:root{ --walker-x-nudge:4px; }

.ed-flywheel-visual img.ed-walker{
  position:absolute !important;
  top:50.4%;
  left:11.3%;
  width:42px !important;
  height:42px !important;
  z-index:3;                 /* above the PNG (z-index:2), same tier as node captions */
  pointer-events:none;
  opacity:0;
  will-change:transform, opacity, left;
  transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);
  animation:ed-walker-cycle 10s ease-in-out infinite;
}

@keyframes ed-walker-cycle{
  0%{left:11.3%;opacity:0;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  3%{left:11.3%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  10%{left:27%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  12%{left:27%;opacity:0;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(.65);}
  32%{left:27%;opacity:0;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(.65);}
  34%{left:27%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  42%{left:45.3%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  45%{left:45.3%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1.03);}
  48%{left:45.3%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(.99);}
  51%{left:45.3%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1.03);}
  54%{left:45.3%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  63%{left:68.8%;opacity:1;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  66.5%{left:68.8%;opacity:0;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(.7);}
  66.6%{left:11.3%;opacity:0;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
  100%{left:11.3%;opacity:0;transform:translate3d(calc(-50% + var(--walker-x-nudge)),-50%,0) scale(1);}
}

@media (max-width:900px){
  .ed-flywheel-visual img.ed-walker{ width:36px !important; height:36px !important; }
}

/* ============================================================
   MICRO-INTERACTION 3 — wave/ripple on hover over each platform
   circle (hub, vendor, subscriber, agent, customer). Invisible
   hotspot sized to each circle's measured diameter, two staggered
   expanding rings in the existing --primary/--forest palette.
   Decorative only — no click behavior, doesn't block the walker
   or existing links since it sits under them and pointer-events
   is scoped to the hotspot's own circular area only.
   ============================================================ */
.ed-node-hotspot{
  position:absolute;
  top:50.4%;
  aspect-ratio:1/1;
  transform:translate3d(-50%,-50%,0);
  border-radius:50%;
  z-index:2;
  pointer-events:auto;
  cursor:default;
}
/* wave/ripple lives on the hub only — vendor/subscriber/agent/
   customer hotspots stay in place for potential future use but
   are visually inert */
.ed-node-hotspot--hub::before,
.ed-node-hotspot--hub::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--primary);
  opacity:0;
}
.ed-node-hotspot--hub:hover::before{
  animation:ed-node-wave 1.3s ease-out infinite;
}
.ed-node-hotspot--hub:hover::after{
  animation:ed-node-wave 1.3s ease-out infinite;
  animation-delay:.45s;
}
@keyframes ed-node-wave{
  0%{   transform:scale(1);    opacity:.55; }
  100%{ transform:scale(1.7);  opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .ed-flywheel-visual img.ed-walker{ animation:none; opacity:0; }
  .ed-node-hotspot--hub:hover::before,
  .ed-node-hotspot--hub:hover::after{ animation:none; opacity:0; }
  .ed-subscriber-shot{ transition:none; }
  .ed-subscriber-shot:hover{ transform:none; }
}

/* ============================================================
   MICRO-INTERACTION 2 — dashboard hover lift
   Desktop / hover-capable pointers only. Transform + box-shadow
   only, no scale/tilt/blur/glow, border-radius untouched.
   ============================================================ */
.ed-subscriber-shot{
  transition:transform 280ms ease, box-shadow 280ms ease;
}
@media (hover:hover) and (pointer:fine){
  .ed-subscriber-shot:hover{
    transform:translateY(-9px);
    box-shadow:0 42px 110px rgba(22,38,29,0.28);
  }
}