/* Mechanic homepage hero: "signal flow" (events -> Liquid task -> actions),
   plus the stats strip below it. Loaded by dist/index.html after site.css.
   Asset paths are relative to dist/assets/homepage/. */

@font-face{font-family:Favorit;src:url("../uploads/2023/01/LightwardFavorit-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:Favorit;src:url("../uploads/2023/01/LightwardFavorit-Regular.woff") format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:Favorit;src:url("../uploads/2023/01/LightwardFavorit-Bold.woff") format("woff");font-weight:600 800;font-display:swap}

.sf-hero{
  --sf-navy:#001937;
  --sf-cream:#fffbe7;
  --sf-ink:#101010;
  --sf-yellow:#fdcd00;
  --sf-gold:#e2af5c;
  --sf-green:#0d5f3a;
  --sf-olive:#4c5044;
  --sf-pulse:var(--sf-yellow);
  --sf-veil:.2;
  --sf-leg:1s;
  --sf-font:Favorit,system-ui,sans-serif;
  position:relative;overflow:hidden;background:#2a344a;color:var(--sf-cream);
  font-family:var(--sf-font);
}
.sf-hero *,.sf-hero *::before,.sf-hero *::after{box-sizing:border-box}
/* The site theme sets bold text with a 1.8 line height on body and its own
   h1 font, and its masthead overlays the page top from 1121px (90px tall).
   Reset those here so the hero renders as designed. */
.sf-hero,.sf-stats{font-weight:400;line-height:normal}
.sf-hero .sf-title{font-family:var(--sf-font)}
@media (min-width:1121px){.sf-hero{padding-top:90px}}
.sf-aura{position:absolute;inset:0;background:url("../uploads/2023/01/Section1-aura.png") center/cover no-repeat}
.sf-veil{position:absolute;inset:0;background:rgba(0,25,55,var(--sf-veil))}
.sf-inner{position:relative;max-width:1376px;margin:0 auto;padding:0 48px}

/* Copy */
.sf-copy{padding:60px 0 28px;max-width:820px}
.sf-title{margin:0;font-weight:700;font-size:clamp(2.75rem,5vw,4.5rem);line-height:1;letter-spacing:-.01em;color:var(--sf-cream)}
.sf-subtitle{display:block;margin-top:6px;font-weight:400;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.1;letter-spacing:0}
.sf-lede{margin:22px 0 0;max-width:660px;font-size:17px;line-height:1.6;font-weight:300}
.sf-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
/* Matches the agency section's button so the page has one CTA style. */
.sf-hero .sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:14px 22px;border:1px solid var(--sf-ink);border-radius:4px;background:var(--sf-yellow);color:var(--sf-ink);font-size:16px;font-weight:700;line-height:1.4;text-decoration:none}
.sf-hero .sf-btn:hover,.sf-hero .sf-btn:focus-visible{background:var(--sf-gold);color:var(--sf-ink)}
.sf-hero .sf-textlink{color:var(--sf-cream);font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,251,231,.5)}
.sf-hero .sf-textlink:hover,.sf-hero .sf-textlink:focus-visible{color:var(--sf-cream);text-decoration-color:var(--sf-cream)}
.sf-hero .sf-btn:focus-visible,.sf-hero .sf-textlink:focus-visible{outline:2px solid var(--sf-yellow);outline-offset:3px}

/* Stage */
.sf-figure{margin:0;padding-bottom:36px}
.sf-stage{position:relative;width:100%;aspect-ratio:1280/460}
.sf-cables{position:absolute;inset:0;width:100%;height:100%;color:var(--sf-pulse)}
.sf-cables .sf-sheath{stroke:rgba(255,251,231,.16);stroke-width:7}
.sf-cables .sf-core{stroke:rgba(255,251,231,.7);stroke-width:1.2}
.sf-pulse{stroke:currentColor;stroke-width:2.8;stroke-dasharray:70 1000;stroke-dashoffset:70;opacity:0;filter:drop-shadow(0 0 6px currentColor)}
.sf-pulse.is-firing{opacity:1;animation:sf-flow var(--sf-leg) cubic-bezier(.45,0,.55,1) forwards}
.sf-col{display:contents}
.sf-label{position:absolute;top:1%;margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-cream)}
.sf-col-events .sf-label{left:24.22%;transform:translateX(-100%)}
.sf-col-actions .sf-label{left:75.78%}
.sf-task-label{position:absolute;top:1%;left:50%;transform:translateX(-50%);margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* Event + action cards */
.sf-node{position:absolute;top:var(--y);display:flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;background:var(--sf-cream);color:var(--sf-ink);border-radius:6px;white-space:nowrap;box-shadow:0 12px 32px rgba(0,25,55,.28);transition:box-shadow .3s ease}
.sf-node.is-lit{box-shadow:0 0 0 2px var(--sf-pulse),0 12px 32px rgba(0,25,55,.32)}
.sf-event{left:24.22%;transform:translate(-100%,-50%);padding-right:12px;appearance:none;border:0;margin:0;font:inherit;text-align:left;cursor:pointer}
.sf-event:hover{outline:2px solid rgba(253,205,0,.55);outline-offset:0}
.sf-event:focus-visible{outline:2px solid var(--sf-yellow);outline-offset:2px}
.sf-action{left:75.78%;transform:translateY(-50%)}
.sf-tile{width:36px;height:36px;flex:none;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.sf-tile svg{width:18px;height:18px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sf-event .sf-tile{background:var(--sf-navy)}
.sf-event .sf-tile svg{stroke:var(--sf-cream)}
.sf-action .sf-tile{background:var(--sf-ink)}
.sf-action .sf-tile svg{stroke:var(--sf-pulse)}
.sf-node.is-lit .sf-tile{background:var(--sf-pulse)}
.sf-node.is-lit .sf-tile svg{stroke:var(--sf-ink)}
.sf-src{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-green)}
.sf-topic{display:block;margin-top:2px;font-family:var(--sf-font);font-size:12px}
.sf-type{display:block;font-family:var(--sf-font);font-size:12.5px;font-weight:500}
.sf-desc{display:block;margin-top:1px;font-size:12.5px;color:var(--sf-olive)}
.sf-play{width:22px;height:22px;flex:none;margin-left:6px;border-radius:50%;border:1.5px solid var(--sf-ink);display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.sf-play svg{width:8px;height:9px;fill:var(--sf-ink)}
.sf-event:hover .sf-play,.sf-event:focus-visible .sf-play,.sf-event.is-lit .sf-play{background:var(--sf-pulse);border-color:var(--sf-pulse)}
.sf-port{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--sf-pulse);border:2px solid var(--sf-cream)}
.sf-event .sf-port{right:-5px}
.sf-action .sf-port{left:-5px}
.sf-hint{position:absolute;left:24.22%;top:95.5%;transform:translateX(-100%);display:flex;align-items:center;gap:8px;margin:0;font-size:13px;white-space:nowrap}
.sf-hint svg{width:14px;height:16px;fill:none;stroke:var(--sf-cream);stroke-width:1.1;stroke-linejoin:round}

/* Two ways in: library vs custom */
.sf-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}

/* Task card */
.sf-task{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:384px;z-index:2;background:var(--sf-ink);color:var(--sf-cream);border-radius:10px;box-shadow:0 30px 80px rgba(0,25,55,.45)}
.sf-task-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid #272727}
.sf-task-id{display:flex;align-items:center;gap:10px;min-width:0}
.sf-gear{width:28px;height:28px;flex:none;animation:sf-spin 1.4s linear infinite;animation-play-state:paused}
.sf-gear.is-running{animation-play-state:running}
.sf-gear svg{width:28px;height:28px;display:block}
.sf-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#bdbdbd}
.sf-task-name{display:block;font-size:15px;font-weight:700;white-space:nowrap;max-width:230px}
.sf-kind{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--sf-ink);background:var(--sf-pulse);border-radius:4px;padding:4px 9px;white-space:nowrap}
.sf-kind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sf-ink)}
.sf-kind.is-library{background:var(--sf-cream)}
.sf-task-id>div{min-width:0}
.sf-task-name{overflow:hidden;text-overflow:ellipsis}
.sf-subs{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #272727;font-family:var(--sf-font);font-size:10.5px}
.sf-subs-label{color:#bdbdbd;letter-spacing:.08em;text-transform:uppercase}
.sf-task-sub{border:1px solid #3a3a3a;border-radius:4px;padding:3px 8px}
.sf-body{height:177px;overflow:hidden}
.sf-body[hidden]{display:none}
.sf-code{height:177px;margin:0;padding:6px 10px 6px 4px;font-family:var(--sf-font);font-size:10.5px;line-height:15px;overflow:hidden}
.sf-line{display:flex;white-space:pre;transition:background .3s ease}
.sf-line.is-hot{background:rgba(253,205,0,.14);box-shadow:inset 2px 0 0 var(--sf-pulse)}
.sf-ln{width:24px;flex:none;padding-right:10px;text-align:right;color:#5c5c5c;user-select:none}
.tok-t{color:var(--sf-yellow)}
.tok-p{color:#e8e4d2}
.tok-s{color:var(--sf-gold)}
.tok-d{color:#7a7a70}
.sf-options{margin:0;padding:6px 14px 0;display:flex;flex-direction:column;gap:1px}
.sf-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;height:20px;padding:0 6px;margin:0 -6px;border-radius:3px;transition:background .3s ease}
.sf-opt.is-hot{background:rgba(253,205,0,.14);box-shadow:inset 2px 0 0 var(--sf-pulse)}
.sf-opt dt{font-size:11.5px;color:#d6d3c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-opt dd{margin:0;flex:none;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sf-font);font-size:10.5px;color:var(--sf-cream);border:1px solid #3a3a3a;border-radius:3px;padding:1px 7px}
.sf-opt dd.is-empty{color:#8a8a80}
.sf-opt dd.is-check{border-color:var(--sf-pulse);background:var(--sf-pulse);color:var(--sf-ink);padding:1px 5px}
.sf-library-link{display:inline-block;margin:5px 0 0 14px;font-size:12px;color:var(--sf-pulse);text-decoration:none}
.sf-library-link:hover,.sf-library-link:focus-visible{text-decoration:underline;color:var(--sf-pulse)}
.sf-runs{padding:10px 14px 12px;border-top:1px solid #272727}
.sf-runs-head{display:flex;justify-content:space-between;align-items:baseline}
.sf-runs-note{font-family:var(--sf-font);font-size:10px;color:#8a8a80}
.sf-log{height:60px;margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.sf-log li{display:flex;align-items:center;gap:8px;height:16px;font-family:var(--sf-font);font-size:10.5px;white-space:nowrap}
.sf-log li:nth-child(2){opacity:.72}
.sf-log li:nth-child(3){opacity:.44}
.sf-tag{width:46px;flex:none;padding:1px 0;border-radius:3px;text-align:center;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.sf-tag-event{background:var(--sf-cream);color:var(--sf-ink)}
.sf-tag-task{background:var(--sf-green);color:var(--sf-cream)}
.sf-tag-action{background:var(--sf-pulse);color:var(--sf-ink)}
.sf-log-text{overflow:hidden;text-overflow:ellipsis}

/* Stats strip: directly below the hero, on cream */
.sf-stats{background:var(--sf-cream,#fffbe7);color:#101010;font-family:Favorit,system-ui,sans-serif}
.sf-stats-inner{max-width:1376px;margin:0 auto;padding:40px 48px 48px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;box-sizing:border-box}
.sf-stat{border-top:1px solid #101010;padding-top:14px}
.sf-stat strong{display:block;font-size:30px;font-weight:700;line-height:1.2}
.sf-stat span{display:block;margin-top:4px;font-size:15px;color:#4c5044}
@media (max-width:640px){
  .sf-stats-inner{grid-template-columns:1fr;padding:32px 24px 36px;gap:18px}
}

@keyframes sf-flow{from{stroke-dashoffset:70}to{stroke-dashoffset:-1000}}
@keyframes sf-spin{to{transform:rotate(360deg)}}

/* Narrow screens: no cables and no action cards (the task card's run log
   names the action). Events become a compact row of chips above the card. */
@media (max-width:1199px){
  .sf-inner{padding:0 24px}
  .sf-stage{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  .sf-cables,.sf-task-label,.sf-col-actions,.sf-port,.sf-event .sf-tile{display:none}
  .sf-col-events{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .sf-col .sf-label,.sf-col .sf-hint{position:static;transform:none;flex-basis:100%}
  .sf-node{position:static;transform:none}
  .sf-event{gap:10px;padding:6px 6px 6px 12px}
  .sf-event .sf-src,.sf-event .sf-topic{display:inline;margin:0}
  .sf-event .sf-src{margin-right:6px}
  .sf-play{margin-left:0}
  .sf-task{position:static;transform:none;width:100%;max-width:520px;justify-self:start}
}
@media (max-width:420px){
  .sf-code{font-size:9.5px}
  .sf-hero .sf-btn{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sf-gear,.sf-pulse.is-firing{animation:none}
  .sf-pulse.is-firing{opacity:0}
}