/* Platform overview: start-anywhere.jpg rebuilt in HTML/SVG (markup in template-parts/fig-platform.php).
   Sizes are canvas pixels × --k: on desktop the canvas is 1400×672 scaled to the column; on phones --k is 1px. */
.fig-platform .fg-platform-root{container:fgplat/inline-size;max-width:1240px;margin:0 auto;color:#141a3a;-webkit-font-smoothing:antialiased}
.fig-platform .fg-platform-root *{box-sizing:border-box}
.fig-platform .fg-platform-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(.fig-platform) a{text-decoration:none;color:inherit}
.fig-platform a:focus-visible{outline:2px solid #ff5a1a;outline-offset:3px;border-radius:8px}
.fig-platform svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.fg-platform-stage{--k:calc(100cqw / 1400);position:relative;aspect-ratio:1400/672}
.fg-platform-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fg-platform-line path{fill:none;stroke-linecap:round}
.fg-platform-line .core{stroke:var(--c);stroke-width:3.5;filter:drop-shadow(0 0 4px var(--c))}
.fg-platform-line .pulse{stroke:#fff;stroke-width:3;stroke-dasharray:5 95;stroke-dashoffset:100;animation:fg-platform-flow 3.4s linear infinite}
.fg-platform-line:nth-of-type(2) .pulse{animation-delay:-.8s}
.fg-platform-line:nth-of-type(3) .pulse{animation-delay:-1.7s}
.fg-platform-line:nth-of-type(4) .pulse{animation-delay:-2.5s}
.fg-platform-line circle{fill:var(--c);stroke:#fff;stroke-width:2.5}
@keyframes fg-platform-flow{to{stroke-dashoffset:0}}

/* the four step cards */
.fg-platform-card{position:absolute;top:6.667%;width:22.571%;height:54.444%;display:flex;flex-direction:column;align-items:center;
  padding:calc(50 * var(--k)) calc(16 * var(--k)) 0;border-radius:calc(22 * var(--k));
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.78));border:calc(1.5 * var(--k)) solid #eceef4;
  box-shadow:0 calc(14 * var(--k)) calc(34 * var(--k)) calc(-14 * var(--k)) rgba(17,24,47,.18)}
.fg-platform-c1{left:2.143%;--c:#ff8a1a}
.fg-platform-c2{left:26%;--c:#ff3d3d}
.fg-platform-c3{left:49.857%;--c:#ff2d7a}
.fg-platform-c4{left:73.714%;--c:#b0157a}
.fg-platform-num{position:absolute;top:calc(-32 * var(--k));left:50%;transform:translateX(-50%);display:grid;place-items:center;width:calc(64 * var(--k));height:calc(64 * var(--k));
  border-radius:50%;background:var(--c);color:#fff;font-size:calc(24 * var(--k));font-weight:700;box-shadow:0 0 calc(18 * var(--k)) var(--c)}
.fg-platform-c1 .fg-platform-num{background:linear-gradient(135deg,#ffb31a,#ff6a00)}
.fg-platform-c2 .fg-platform-num{background:linear-gradient(135deg,#ff6a3d,#ff1f3d)}
.fg-platform-c3 .fg-platform-num{background:linear-gradient(135deg,#ff3d6a,#e0157a)}
.fg-platform-c4 .fg-platform-num{background:linear-gradient(135deg,#a3125f,#6a0d4a)}
.fg-platform-card h3{margin:0 0 calc(18 * var(--k));min-height:calc(54 * var(--k));display:flex;align-items:center;text-align:center;
  font-size:calc(21 * var(--k));line-height:1.2;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#141a3a}
.fg-platform-card h3 a:hover{color:var(--c)}

/* process rows (cards 1 and 3) */
.fg-platform-rows{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:calc(10 * var(--k))}
.fg-platform-row{display:flex;align-items:center;gap:calc(14 * var(--k));height:calc(50 * var(--k));padding:0 calc(14 * var(--k));border-radius:calc(12 * var(--k));
  background:#fff;border:calc(1.5 * var(--k)) solid #e6e8ef;color:#9aa1b4;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s}
.fg-platform-row svg.i{font-size:calc(26 * var(--k))}
.fg-platform-row>span:not(.fg-platform-sr){flex:1;display:flex;flex-direction:column;gap:calc(6 * var(--k))}
.fg-platform-row b{font-size:calc(16 * var(--k));font-weight:700;line-height:1}
.fg-platform-row i{display:block;height:calc(6 * var(--k));border-radius:99px;background:#e3e5ec;position:relative;overflow:hidden}
.fg-platform-row i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--bar,#cfd3de);transform-origin:left;transform:scaleX(var(--f,.6))}
.fg-platform-row.is-on{color:#141a3a}
.fg-platform-row.is-on svg.i{color:var(--rc,var(--c))}
.fg-platform-row.is-on i::after{--bar:var(--rc,var(--c))}
.fg-platform-c1 .fg-platform-row.is-on{border-color:#ffb066;box-shadow:0 0 0 calc(2 * var(--k)) rgba(255,138,26,.35),0 0 calc(18 * var(--k)) rgba(255,138,26,.45)}
.fg-platform-c1 .fg-platform-row:not(.is-on){opacity:.75}
.fg-platform-rows.is-all li:nth-child(1) .fg-platform-row{--rc:#ff8a1a;--f:.9;border-color:#ffc79a}
.fg-platform-rows.is-all li:nth-child(2) .fg-platform-row{--rc:#ff3d3d;--f:.6;border-color:#ffb0b0}
.fg-platform-rows.is-all li:nth-child(3) .fg-platform-row{--rc:#ff2d7a;--f:.95;border-color:#ffb0cf}
.fg-platform-rows.is-all li:nth-child(4) .fg-platform-row{--rc:#8a1a63;--f:.8;border-color:#e4b4d2}
.fg-platform-row:hover,.fg-platform-row:focus-visible{transform:translateX(calc(3 * var(--k)));color:#141a3a;opacity:1;border-color:var(--rc,var(--c));box-shadow:0 0 calc(14 * var(--k)) rgba(255,90,60,.25)}
.fg-platform-row:hover svg.i{color:var(--rc,var(--c))}
.fg-platform-rows.is-all .fg-platform-row i::after{animation:fg-platform-grow 1.2s cubic-bezier(.2,.7,.2,1) both}
.fg-platform-rows.is-all li:nth-child(2) i::after{animation-delay:.25s}
.fg-platform-rows.is-all li:nth-child(3) i::after{animation-delay:.5s}
.fg-platform-rows.is-all li:nth-child(4) i::after{animation-delay:.75s}
@keyframes fg-platform-grow{from{transform:scaleX(0)}}

/* channels (card 2) */
.fg-platform-chans{list-style:none;margin:0;padding:0;display:flex;gap:calc(14 * var(--k))}
.fg-platform-chans a{display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--k));width:calc(64 * var(--k))}
.fg-platform-tile{display:grid;place-items:center;width:calc(64 * var(--k));height:calc(64 * var(--k));border-radius:calc(12 * var(--k));background:#fff;border:calc(1.5 * var(--k)) solid #e6e8ef;
  color:#1d2547;font-size:calc(28 * var(--k));box-shadow:0 calc(4 * var(--k)) calc(10 * var(--k)) rgba(17,24,47,.06);transition:transform .2s,border-color .2s,box-shadow .2s,color .2s}
.fg-platform-chans b{font-size:calc(14 * var(--k));font-weight:700}
.fg-platform-chans a:hover .fg-platform-tile,.fg-platform-chans a:focus-visible .fg-platform-tile{transform:translateY(calc(-3 * var(--k)));border-color:#ff7a5a;color:#ff3d3d;box-shadow:0 0 calc(16 * var(--k)) rgba(255,61,61,.3)}
.fg-platform-fan{position:absolute;left:0;bottom:0;width:100%;height:calc(130 * var(--k));pointer-events:none}
.fg-platform-fan path{fill:none;stroke:url(#fg-platform-tile);stroke:#ff6a3d;stroke-width:2.2;stroke-linecap:round;opacity:.85}
.fg-platform-c2 .fg-platform-fan path{stroke:#ff5a3d}

/* expand (card 4) */
.fg-platform-map{display:block;width:100%}
.fg-platform-map svg{display:block;width:100%;height:auto}
.fg-platform-map circle{fill:#b9c0cf;transition:fill .3s}
.fg-platform-map:hover circle{fill:#9aa3b8}
.fg-platform-map .pin{animation:fg-platform-bob 2.6s ease-in-out infinite}
.fg-platform-map .pin:nth-of-type(2n){animation-delay:-1.3s}
@keyframes fg-platform-bob{50%{transform:translateY(-3px)}}
.fg-platform-sites{list-style:none;margin:calc(6 * var(--k)) 0 0;padding:0;display:flex;justify-content:space-between;width:calc(276 * var(--k))}
.fg-platform-sites a{position:relative;display:flex;flex-direction:column;align-items:center;width:calc(76 * var(--k))}
.fg-platform-sites .pin{width:calc(20 * var(--k));height:calc(20 * var(--k));color:#b0157a;margin-bottom:calc(-4 * var(--k))}
.fg-platform-sites li:nth-child(1) .pin{color:#ff3d6a}
.fg-platform-sites li:nth-child(3) .pin{color:#ff2d7a}
.fg-platform-sites .bld{width:100%;height:auto;transition:transform .2s}
.fg-platform-sites a:hover .bld,.fg-platform-sites a:focus-visible .bld{transform:translateY(calc(-3 * var(--k)))}
.fg-platform-sites a::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 2px);transform:translate(-50%,4px);white-space:nowrap;padding:4px 9px;border-radius:99px;
  background:#141a3a;color:#fff;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3}
.fg-platform-sites a:hover::after,.fg-platform-sites a:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.fg-platform-fan4{height:calc(60 * var(--k))}
.fg-platform-fan4 path{stroke:#b0157a}

/* the SPICE platform tile */
.fg-platform-hub{position:absolute;left:40.43%;top:66.11%;width:19.14%;height:16.11%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--k));
  border-radius:calc(22 * var(--k));color:#fff;transition:transform .25s}
.fg-platform-logo{display:block;width:calc(132 * var(--k));height:auto}
.fg-platform-hub-sub{font-size:calc(19 * var(--k));font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fg-platform-hub:hover,.fg-platform-hub:focus-visible{transform:translateY(calc(-3 * var(--k)))}
.fg-platform-hub:hover .fg-platform-hub-sub{color:#ffd0a8}

/* Phones and narrow columns: cards stack, the platform becomes a bar underneath */
@container fgplat (max-width:760px){
  .fg-platform-stage{--k:1px;aspect-ratio:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:46px 16px;padding-top:34px}
  .fg-platform-wires{display:none}
  .fg-platform-card{position:relative;left:auto;top:auto;width:auto;height:auto;padding-bottom:24px}
  .fg-platform-fan{display:none}
  .fg-platform-hub{position:relative;left:auto;top:auto;width:auto;height:auto;padding:20px 12px 18px;grid-column:1/-1;margin-top:-16px;
    background:#141c3c;border:3px solid #ff3d6a;box-shadow:0 0 18px rgba(255,61,106,.45),0 14px 26px -8px rgba(60,80,200,.45)}
  .fg-platform-card::after{content:'';position:absolute;left:50%;bottom:-30px;width:3px;height:30px;margin-left:-1.5px;background:var(--c);box-shadow:0 0 6px var(--c)}
}
@media (prefers-reduced-motion:reduce){.fig-platform .pulse,.fig-platform .pin{animation:none!important;display:revert}.fig-platform .fg-platform-line .pulse{display:none}.fig-platform *{transition:none!important}.fig-platform i::after{animation:none!important}}

/* Hub = the drawn SPICE™ box (canvas 566,476 · 268×116), one centred stack: logo, PLATFORM, SpicY™ pill (Sean, 2026-10-29).
   It used to sit at y 444–552, 32px above the drawn box, so the logo crossed the top border. */
@container fgplat (min-width:761px){.fg-platform-hub{top:70.833%;height:17.262%;left:40.4286%;width:19.143%;justify-content:center;gap:calc(6 * var(--k));padding:calc(10 * var(--k)) calc(12 * var(--k))}}
.fg-platform-hub{gap:calc(6 * var(--k))}
.fg-platform-logo{width:calc(100 * var(--k))}
.fg-platform-hub-sub{font-size:calc(16 * var(--k));line-height:1;padding-left:.14em}
.fg-platform-ai{display:inline-flex;align-items:center;gap:calc(5 * var(--k));padding:calc(4 * var(--k)) calc(11 * var(--k));border-radius:99px;font-size:calc(13 * var(--k));font-weight:700;line-height:1.1;white-space:nowrap;color:#ffd0a8;background:rgba(255,255,255,.08);border:1px solid rgba(255,140,80,.5)}
.fg-platform-ai svg{width:1.1em;height:1.1em;fill:none;stroke:#ff9a4a;stroke-width:2.2}