/* card-anim.css — animated build-card mechanisms (genevibin)
   Scoped under .fp-mech so nothing collides with the rest of the site.
   Paired with card-anim.js. Light viz panel + vanilla SVG line-art. */

.bld-viz.is-mech{
  aspect-ratio: 300 / 170;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: block;
  place-items: initial;
  position: relative;
}
.bld-viz.is-mech::after{ display: none; }
.bld-viz.is-mech .bld-badge{ position: absolute; top: 12px; left: 12px; z-index: 2; }
.bld-viz.is-mech svg.fp-svg{ display: block; width: 100%; height: 100%; filter: none; transform: none; stroke: none; stroke-width: 0; }

.fp-mech .wire{ fill:none; stroke:var(--green); stroke-width:1.4; opacity:0; stroke-linecap:round; }
.fp-mech .pline{ stroke:var(--ink-soft); stroke-width:1.7; }
.fp-mech .post{ stroke:color-mix(in oklab,var(--ink),transparent 55%); stroke-width:1.5; stroke-linecap:round; }
.fp-mech .ring{ fill:none; stroke:var(--green); stroke-width:1.7; }
.fp-mech .ring2{ fill:color-mix(in oklab,var(--green),white 86%); stroke:var(--green); stroke-width:1.6; }
.fp-mech .core{ fill:var(--green); filter:drop-shadow(0 0 3px color-mix(in oklab,var(--green),transparent 50%)); }
.fp-mech .halo{ fill:none; stroke:var(--green); stroke-width:1.5; opacity:0; filter:drop-shadow(0 0 4px color-mix(in oklab,var(--green),transparent 50%)); }
.fp-mech .pp{ fill:var(--green); opacity:0; }
.fp-mech .flash{ fill:var(--green); opacity:0; }
.fp-mech .inp{ fill:color-mix(in oklab,var(--green),white 84%); stroke:color-mix(in oklab,var(--green),transparent 40%); stroke-width:1; }
.fp-mech .docp{ fill:#fff; stroke:var(--line); stroke-width:1; }
.fp-mech .doch{ fill:var(--green); }
.fp-mech .docl{ fill:var(--ink); }
.fp-mech .cite{ fill:var(--green); }
.fp-mech .lead{ fill:var(--ink-soft); opacity:.12; }
.fp-mech .leaddot{ fill:var(--green); opacity:0; }
.fp-mech .chan{ fill:none; stroke:var(--ink); stroke-width:1.4; }
.fp-mech .gate{ fill:var(--green); }
.fp-mech .pnl{ fill:var(--green); }
.fp-mech .arrow{ fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.fp-mech .chip2{ fill:var(--green-pale); stroke:var(--green-deep); stroke-width:.6; }
.fp-mech .tot{ fill:var(--green); }
.fp-mech .cap{ fill:var(--ink); }
.fp-mech .slide-card{ fill:#fff; stroke:var(--green-deep); stroke-width:.9; opacity:0; filter:drop-shadow(0 2px 3px color-mix(in oklab,var(--ink),transparent 84%)); }
.fp-mech .slide-bar{ fill:var(--green); opacity:0; }
.fp-mech .pdf{ fill:#fff; stroke:var(--ink-soft); stroke-width:1.2; }
.fp-mech .pdf-f{ fill:var(--ink-soft); }
.fp-mech .check{ fill:none; stroke:var(--green-deep); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }

.fp-mech .dpage{ fill:#fff; stroke:var(--ink-soft); stroke-width:1.1; }
.fp-mech .dline{ fill:var(--ink); opacity:.3; }
.fp-mech .dcut{ stroke:var(--green); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.fp-mech .gdot{ fill:var(--ink-soft); opacity:0; }
.fp-mech .dq{ stroke:var(--green); stroke-width:1.3; stroke-dasharray:2 3; opacity:0; }
.fp-mech .fbar{ fill:color-mix(in oklab,var(--green),white 74%); stroke:none; }
.fp-mech .fwave{ fill:none; stroke:var(--green); stroke-width:1.8; opacity:0; stroke-linecap:round; }
.fp-mech .axis{ stroke:color-mix(in oklab,var(--ink),transparent 68%); stroke-width:1; }
.fp-mech .peak{ fill:var(--green); }

.fp-mech .gx{ transform-box:fill-box; transform-origin:left center; transform:scaleX(0); }
.fp-mech .gy{ transform-box:fill-box; transform-origin:bottom center; transform:scaleY(0); }
.fp-mech .gc{ transform-box:fill-box; transform-origin:center; transform:scale(0); }

/* expandable "how it works" detail on build cards */
.bld-more{ margin:0 18px 14px; border-top:1px solid var(--line); }
.bld-more > summary{ list-style:none; cursor:pointer; padding:11px 0 0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep); display:flex; align-items:center; }
.bld-more > summary::-webkit-details-marker{ display:none; }
.bld-more > summary::after{ content:"+"; margin-left:auto; font-size:15px; line-height:1; opacity:.65; }
.bld-more[open] > summary::after{ content:"\2013"; }
.bld-more-in{ padding-top:10px; }
.bld-more-in > p{ margin:0 0 11px; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.bld-more-in dl{ margin:0; display:grid; gap:9px; }
.bld-more-in dt{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); margin-bottom:2px; }
.bld-more-in dd{ margin:0; font-size:13px; line-height:1.45; color:var(--ink); }

/* card-anim.css — animated build-card mechanisms (genevibin)
   Scoped under .fp-mech so nothing collides with the rest of the site.
   Paired with card-anim.js. Light viz panel + vanilla SVG line-art. */

.bld-viz.is-mech{
  aspect-ratio: 300 / 170;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: block;
  place-items: initial;
  position: relative;
}
.bld-viz.is-mech::after{ display: none; }
.bld-viz.is-mech .bld-badge{ position: absolute; top: 12px; left: 12px; z-index: 2; }
.bld-viz.is-mech svg.fp-svg{ display: block; width: 100%; height: 100%; filter: none; transform: none; stroke: none; stroke-width: 0; }

.fp-mech .bg-track{ fill:none; stroke:var(--ink-soft); stroke-width:2; opacity:0.35; }
.fp-mech .wire{ fill:none; stroke:var(--green); stroke-width:1.4; opacity:0; stroke-linecap:round; }
.fp-mech .pline{ stroke:var(--ink-soft); stroke-width:1.7; }
.fp-mech .post{ stroke:color-mix(in oklab,var(--ink),transparent 55%); stroke-width:1.5; stroke-linecap:round; }
.fp-mech .ring{ fill:none; stroke:var(--green); stroke-width:1.7; }
.fp-mech .ring2{ fill:color-mix(in oklab,var(--green),white 86%); stroke:var(--green); stroke-width:1.6; }
.fp-mech .core{ fill:var(--green); filter:drop-shadow(0 0 3px color-mix(in oklab,var(--green),transparent 50%)); }
.fp-mech .halo{ fill:none; stroke:var(--green); stroke-width:1.5; opacity:0; filter:drop-shadow(0 0 4px color-mix(in oklab,var(--green),transparent 50%)); }
.fp-mech .pp{ fill:var(--green); opacity:0; }
.fp-mech .flash{ fill:var(--green); opacity:0; }
.fp-mech .inp{ fill:color-mix(in oklab,var(--green),white 84%); stroke:color-mix(in oklab,var(--green),transparent 40%); stroke-width:1; }
.fp-mech .docp{ fill:#fff; stroke:var(--line); stroke-width:1; }
.fp-mech .doch{ fill:var(--green); }
.fp-mech .docl{ fill:var(--ink); }
.fp-mech .cite{ fill:var(--green); }
.fp-mech .lead{ fill:var(--ink-soft); opacity:.12; }
.fp-mech .leaddot{ fill:var(--green); opacity:0; }
.fp-mech .chan{ fill:none; stroke:var(--ink); stroke-width:1.4; }
.fp-mech .gate{ fill:var(--green); }
.fp-mech .pnl{ fill:var(--green); }
.fp-mech .arrow{ fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.fp-mech .chip2{ fill:var(--green-pale); stroke:var(--green-deep); stroke-width:.6; }
.fp-mech .tot{ fill:var(--green); }
.fp-mech .cap{ fill:var(--ink); }
.fp-mech .slide-card{ fill:#fff; stroke:var(--green-deep); stroke-width:.9; opacity:0; filter:drop-shadow(0 2px 3px color-mix(in oklab,var(--ink),transparent 84%)); }
.fp-mech .slide-bar{ fill:var(--green); opacity:0; }
.fp-mech .pdf{ fill:#fff; stroke:var(--ink-soft); stroke-width:1.2; }
.fp-mech .pdf-f{ fill:var(--ink-soft); }
.fp-mech .check{ fill:none; stroke:var(--green-deep); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }

.fp-mech .dpage{ fill:#fff; stroke:var(--ink-soft); stroke-width:1.1; }
.fp-mech .dline{ fill:var(--ink); opacity:.3; }
.fp-mech .dcut{ stroke:var(--green); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.fp-mech .gdot{ fill:var(--ink-soft); opacity:0; }
.fp-mech .dq{ stroke:var(--green); stroke-width:1.3; stroke-dasharray:2 3; opacity:0; }
.fp-mech .fbar{ fill:color-mix(in oklab,var(--green),white 74%); stroke:none; }
.fp-mech .fwave{ fill:none; stroke:var(--green); stroke-width:1.8; opacity:0; stroke-linecap:round; }
.fp-mech .axis{ stroke:color-mix(in oklab,var(--ink),transparent 68%); stroke-width:1; }
.fp-mech .peak{ fill:var(--green); }

.fp-mech .gx{ transform-box:fill-box; transform-origin:left center; transform:scaleX(0); }
.fp-mech .gy{ transform-box:fill-box; transform-origin:bottom center; transform:scaleY(0); }
.fp-mech .gc{ transform-box:fill-box; transform-origin:center; transform:scale(0); }

/* expandable "how it works" detail on build cards */
.bld-more{ margin:0 18px 14px; border-top:1px solid var(--line); }
.bld-more > summary{ list-style:none; cursor:pointer; padding:11px 0 0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep); display:flex; align-items:center; }
.bld-more > summary::-webkit-details-marker{ display:none; }
.bld-more > summary::after{ content:"+"; margin-left:auto; font-size:15px; line-height:1; opacity:.65; }
.bld-more[open] > summary::after{ content:"\2013"; }
.bld-more-in{ padding-top:10px; }
.bld-more-in > p{ margin:0 0 11px; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.bld-more-in dl{ margin:0; display:grid; gap:9px; }
.bld-more-in dt{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); margin-bottom:2px; }
.bld-more-in dd{ margin:0; font-size:13px; line-height:1.45; color:var(--ink); }

/* three-rules animated mechanisms (approach section) */
.rule-viz{ display:block; aspect-ratio:280/120; margin-bottom:16px; border-radius:11px; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); position: relative; }
.rule-viz svg.fp-svg{ display:block; width:100%; height:100%; filter:none; transform:none; stroke:none; stroke-width:0; }
.rule-mech .alert{ stroke:#e0563f; }

/* --- 808 AI "ServiceVignettes" Aesthetic (Light Mode & Clean) --- */
.fp-mech {
  display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  overflow: hidden; border-radius: inherit;
}
.fp-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}