/* ============================================================================
   LoopSuite homepage — "Stop being the integration."
   Self-contained: base reset + tokens + every homepage section.
   Deliberately NOT sharing /assets/site.css, because site.css is still the
   stylesheet for /employees, /how-it-works and the legal pages (and for the
   v12-orbit rollback snapshot). Nothing in here may leak into those.
   Shared chrome (.ls-hd / .ls-ft) is styled by nav.css, loaded after this.

   Tokens are the app's, with a darker ground than #171717 for this design.
   ========================================================================== */
:root{
  /* ground */
  --ground:#0A0A0A;
  --ground-2:#0D0D0D;
  --ground-3:#111111;
  /* app tokens */
  --surface:#202020;
  --raised:#292929;
  --text:#F3F4EF;
  --muted:#A7AAA1;
  --accent:#C6FF34;
  --accent-ink:#171717;
  --good:#9ED32A;
  --amber:#E5B04C;
  --hair:rgba(243,244,239,.10);
  --hair-2:rgba(243,244,239,.17);
  --r:14px; --r-lg:20px; --r-xl:26px;
  --e:cubic-bezier(.22,.61,.36,1);
  --font:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:86px;
  background:var(--ground);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;line-height:1.04;letter-spacing:-.035em;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(198,255,52,.3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* the inline SVG symbol sheet */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:880px}
.sec{padding:74px 0;position:relative}
.sec-b{background:var(--ground-2);border-top:1px solid rgba(243,244,239,.06);border-bottom:1px solid rgba(243,244,239,.06)}
.center{text-align:center}

.kicker{
  display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.h2{font-size:clamp(30px,6vw,50px);letter-spacing:-.04em;line-height:1.02}
.h3{font-size:clamp(22px,3.4vw,28px);letter-spacing:-.03em}
.lede{color:var(--muted);font-size:17px;margin-top:16px;max-width:60ch;line-height:1.55}
.center .lede{margin-inline:auto}
.hl{color:var(--accent)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:var(--accent-ink);
  font-family:inherit;font-weight:650;font-size:16.5px;letter-spacing:-.01em;
  padding:16px 26px;border:0;border-radius:13px;cursor:pointer;text-align:center;
  box-shadow:0 0 0 1px rgba(198,255,52,.5), 0 10px 34px -10px rgba(198,255,52,.55),
             0 0 60px -18px rgba(198,255,52,.7);
  transition:filter .2s var(--e),transform .2s var(--e),box-shadow .2s var(--e);
}
.btn:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(198,255,52,.65), 0 14px 40px -10px rgba(198,255,52,.6),
             0 0 76px -16px rgba(198,255,52,.85);
}
.btn-ghost{
  background:transparent;color:var(--text);border:1px solid var(--hair-2);box-shadow:none;
}
.btn-ghost:hover{background:rgba(243,244,239,.06);filter:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.note{margin-top:16px;font-size:14.5px;color:var(--muted)}
.link-u{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------ app marks -- */
/* One component. To swap a placeholder for a verified provider logo later,
   change the <symbol> that its `data-app` points at — nothing else moves. */
.mk{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--mk,28px);height:var(--mk,28px);border-radius:8px;overflow:hidden;
}
.mk svg{width:100%;height:100%;display:block}
/* "your information" tiles are never a third-party brand: our own surface */
.mk[data-own]{
  background:#1A1A1A;border:1px solid rgba(198,255,52,.28);
  padding:calc(var(--mk,28px) * .16);border-radius:8px;
}
.mk[data-own] svg{color:var(--accent)}

/* ================================================================== HERO == */
.hero{position:relative;padding:44px 0 26px;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:50%;top:-160px;
  width:min(1200px,150vw);aspect-ratio:1/1;transform:translateX(-50%);
  background:radial-gradient(circle,
    rgba(198,255,52,.085) 0%,
    rgba(160,220,40,.035) 34%,
    rgba(198,255,52,0) 66%);
  pointer-events:none;z-index:0;
}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:34px;align-items:center}
.hero h1{
  font-size:clamp(38px,10.2vw,74px);
  letter-spacing:-.045em;line-height:.98;font-weight:800;
  text-wrap:balance;
}
.hero .sub{margin-top:20px;font-size:18px;color:var(--muted);max-width:46ch;line-height:1.5}
.hero-cta{margin-top:30px;display:grid;gap:11px}
.hero-cta .btn{width:100%}
@media (min-width:640px){
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
  .hero-cta .btn{width:auto}
}
@media (min-width:980px){
  .hero{padding:56px 0 34px}
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:34px}
  .hero h1{font-size:clamp(52px,5.2vw,74px)}
}

/* ------------------------------------------------- the app constellation -- */
/* The stage is built at a fixed pixel size and uniformly scaled, so the
   stream SVG (same viewBox) always lines up with the cards, and the reserved
   slot height never changes once painted → CLS stays at 0. */
.scene-slot{
  position:relative;width:100%;
  height:var(--slot,500px);
  --scale:1;
}
.scene{
  position:absolute;left:50%;top:50%;
  width:var(--sw);height:var(--sh);
  transform:translate(-50%,-50%) scale(var(--scale));
  transform-origin:50% 50%;
}
/* wide (desktop) geometry */
.scene{--sw:720px;--sh:620px}
/* narrow (mobile) geometry — a genuinely different composition, not a shrink */
@media (max-width:979px){ .scene{--sw:340px;--sh:470px} }

.scene-slot{--slot:492px}
@media (max-width:400px){ .scene-slot{--slot:452px;--scale:.92} }
@media (min-width:980px){ .scene-slot{--slot:402px;--scale:.60} }
@media (min-width:1080px){ .scene-slot{--slot:434px;--scale:.66} }
@media (min-width:1240px){ .scene-slot{--slot:500px;--scale:.77} }

/* the bloom behind the centre node ---------------------------------------- */
.bloom{
  position:absolute;left:50%;top:var(--bloom-y,46%);
  width:74%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(198,255,52,.20) 0%,
    rgba(198,255,52,.085) 30%,
    rgba(160,210,45,.03) 52%,
    rgba(198,255,52,0) 72%);
  will-change:transform,opacity;
}
@media (max-width:979px){ .bloom{--bloom-y:49%;width:96%} }
.js .bloom{opacity:0;transition:opacity 1.1s var(--e) .25s}
.js .scene.in .bloom{opacity:1;animation:bloomDrift 11s ease-in-out infinite alternate}
@keyframes bloomDrift{
  from{transform:translate(-50%,-50%) scale(.94)}
  to  {transform:translate(-50%,-50%) scale(1.07)}
}

/* light streams ----------------------------------------------------------- */
.streams{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.streams path{fill:none;stroke-linecap:round}
.st-glow{stroke:var(--accent);stroke-width:13;opacity:.16}
.st-halo{stroke:var(--accent);stroke-width:5;opacity:.30}
.st-core{stroke:#EAFFB4;stroke-width:1.5;opacity:.95}
.sglow{filter:blur(7px)}
.shalo{filter:blur(2.5px)}
.st-spark{stroke:#F6FFDD;stroke-width:2.2;opacity:0;stroke-dasharray:7 93}

/* draw-in */
.js .streams .st-glow,
.js .streams .st-halo,
.js .streams .st-core{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.15s var(--e)}
.js .scene.in .streams .st-glow,
.js .scene.in .streams .st-halo,
.js .scene.in .streams .st-core{stroke-dashoffset:0}
.js .streams [data-d="1"]{transition-delay:.14s}
.js .streams [data-d="2"]{transition-delay:.26s}
.js .streams [data-d="3"]{transition-delay:.38s}
.js .streams [data-d="4"]{transition-delay:.50s}
.js .streams [data-d="5"]{transition-delay:.66s}
.js .scene.in .st-spark{opacity:.9;animation:flow 3.4s linear infinite}
.js .scene.in .st-spark[data-d="2"]{animation-delay:-.7s}
.js .scene.in .st-spark[data-d="3"]{animation-delay:-1.4s}
.js .scene.in .st-spark[data-d="4"]{animation-delay:-2.1s}
.js .scene.in .st-spark[data-d="5"]{animation-delay:-2.8s}
@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* the centre employee node ------------------------------------------------ */
.node{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--n,96px);height:var(--n,96px);
  border-radius:26px;
  background:linear-gradient(160deg,#232323,#171717);
  border:1px solid rgba(198,255,52,.34);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(198,255,52,.05),
             0 0 44px -6px rgba(198,255,52,.42),
             0 26px 54px -18px rgba(0,0,0,.95);
}
.node svg{width:56%;height:56%}
.js .node{opacity:0;transform:scale(.7);transition:opacity .7s var(--e) .1s,transform .7s var(--e) .1s}
.js .scene.in .node{opacity:1;transform:scale(1)}

/* a floating app card ----------------------------------------------------- */
.acard{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  background:linear-gradient(168deg,#242424 0%,#1B1B1B 100%);
  border:1px solid rgba(243,244,239,.13);
  border-radius:15px;
  padding:11px 12px 12px;
  box-shadow:0 26px 48px -20px rgba(0,0,0,.95),
             0 6px 16px -8px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(var(--ty,0px))
            perspective(1100px)
            rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))
            scale(var(--sc,1));
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform,opacity;
}
.js .acard{opacity:0;--ty:24px;transition:opacity .72s var(--e),transform .72s var(--e)}
.js .scene.in .acard{opacity:var(--o,1);--ty:0px}
.js .scene.in .acard[data-d="1"]{transition-delay:.06s}
.js .scene.in .acard[data-d="2"]{transition-delay:.16s}
.js .scene.in .acard[data-d="3"]{transition-delay:.26s}
.js .scene.in .acard[data-d="4"]{transition-delay:.36s}
.js .scene.in .acard[data-d="5"]{transition-delay:.52s}

.ac-hd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ac-hd .mk{--mk:17px}
.ac-app{font-size:11.5px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.ac-tag{
  margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:rgba(243,244,239,.07);border:1px solid var(--hair);
  padding:2.5px 7px;border-radius:999px;
}
.ac-line{font-size:12px;line-height:1.45;color:var(--text);letter-spacing:-.005em}
.ac-dim{color:var(--muted)}
.ac-sm{font-size:10.5px}
.ac-bub{
  background:#2E2E2E;border-radius:12px 12px 12px 4px;padding:8px 10px;
  font-size:11.5px;line-height:1.4;color:var(--text);
}
.ac-time{margin-top:6px;font-size:10px;color:#7E817A}
.ac-btn{
  margin-top:10px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:700;letter-spacing:-.01em;
  padding:6px 14px;border-radius:8px;
  box-shadow:0 0 20px -6px rgba(198,255,52,.7);
}
.ac-rows{display:grid;gap:6px;margin-top:2px}
.ac-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11.5px}
.ac-row b{font-weight:500;color:var(--text)}
.ac-row span{color:var(--muted);font-variant-numeric:tabular-nums}
.ac-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11px}
.ac-kv dt{color:#7E817A}
.ac-kv dd{margin:0;color:var(--text)}
.ac-sep{height:1px;background:var(--hair);margin:9px 0}

/* the payoff card */
.acard--result{
  background:linear-gradient(168deg,#2A2A2A 0%,#1E1E1E 100%);
  border-color:rgba(198,255,52,.22);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.98),
             0 0 60px -22px rgba(198,255,52,.45),
             inset 0 1px 0 rgba(255,255,255,.06);
}
.res-file{display:flex;align-items:center;gap:10px}
.res-file .mk{--mk:30px}
.res-name{font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.res-meta{font-size:10.5px;color:#7E817A;margin-top:1px}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:650;letter-spacing:-.005em;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.pill svg{width:11px;height:11px}
.pill--needs{background:rgba(229,176,76,.16);color:var(--amber);border:1px solid rgba(229,176,76,.4)}
.pill--on{background:rgba(158,211,42,.15);color:var(--good);border:1px solid rgba(158,211,42,.42)}
.pill--done{background:rgba(158,211,42,.15);color:var(--good);border:1px solid rgba(158,211,42,.42)}
.pill--paused{background:rgba(243,244,239,.07);color:var(--muted);border:1px solid var(--hair-2)}

/* wide-layout card placement (stage 720 x 620) ---------------------------- */
@media (min-width:980px){
  .sc-fb    {--x:0px;   --y:34px;  --w:244px; --ry:11deg;  --rx:-5deg; --sc:1}
  .sc-crm   {--x:452px; --y:0px;   --w:262px; --ry:-11deg; --rx:-6deg; --sc:.95; --o:.94}
  .sc-price {--x:0px;   --y:296px; --w:232px; --ry:13deg;  --rx:4deg;  --sc:.94; --o:.94}
  .sc-gmail {--x:466px; --y:284px; --w:250px; --ry:-10deg; --rx:3deg;  --sc:1}
  .sc-res   {--x:210px; --y:452px; --w:300px; --ry:0deg;   --rx:6deg;  --sc:1.04}
  .sc-node  {--x:312px; --y:236px; --n:96px}
}
/* narrow-layout placement (stage 340 x 470) ------------------------------- */
@media (max-width:979px){
  .sc-fb    {--x:0px;   --y:0px;   --w:206px; --ry:9deg;   --rx:-4deg; --sc:1}
  .sc-price {--x:186px; --y:94px;  --w:154px; --ry:-10deg; --rx:4deg;  --sc:.96; --o:.95}
  .sc-res   {--x:32px;  --y:316px; --w:276px; --ry:0deg;   --rx:5deg;  --sc:1}
  .sc-node  {--x:136px; --y:196px; --n:72px}
  .sc-crm, .sc-gmail{display:none}
  .acard{padding:10px 11px 11px}
}
.streams-wide{display:none}
@media (min-width:980px){ .streams-wide{display:block} .streams-narrow{display:none} }

/* =========================================== 2 — works with the apps ===== */
.strip{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px;
}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--hair);
  border-radius:999px;padding:9px 16px 9px 10px;
  font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--text);
}
.chip .mk{--mk:22px}
.strip-lbl{
  margin:28px 0 0;text-align:center;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:#7E817A;
}
.strip--own .chip{background:#151515;border-style:dashed;border-color:rgba(198,255,52,.26)}

/* ============================= 3 — the apps stay, the switching goes ===== */
.flow3{display:grid;gap:14px;margin-top:38px;max-width:760px;margin-inline:auto}
.f3{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:24px;
}
.f3-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;background:var(--raised);
  border:1px solid var(--hair-2);font-size:13px;font-weight:600;margin-bottom:14px;
}
.f3 h3{font-size:21px;letter-spacing:-.03em}
.f3 p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
.f3-marks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.f3-marks .mk{--mk:34px;border-radius:10px}
.f3-marks .mk[data-own]{background:#151515}
.f3-join{
  height:34px;width:2px;margin:0 auto;
  background:linear-gradient(to bottom,rgba(198,255,52,.55),rgba(198,255,52,.12));
  border-radius:2px;
}
/* step 2 — the visual emphasis of the section */
.f3--hire{
  background:linear-gradient(150deg,rgba(198,255,52,.10),rgba(198,255,52,.02));
  border-color:rgba(198,255,52,.3);
}
.hire-bar{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:var(--accent-ink);
  border-radius:15px;padding:20px;font-size:20px;font-weight:750;letter-spacing:-.02em;
  box-shadow:0 0 0 1px rgba(198,255,52,.6),0 18px 50px -18px rgba(198,255,52,.75),
             0 0 90px -26px rgba(198,255,52,.9);
}
.hire-bar svg{width:20px;height:20px}
/* step 3 — a mini result card */
.mini-res{
  margin-top:16px;display:flex;align-items:center;gap:12px;
  background:var(--raised);border:1px solid rgba(198,255,52,.2);
  border-radius:15px;padding:13px 14px;
}
.mini-res .mk{--mk:34px}
.mini-res .rn{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.mini-res .rm{font-size:12px;color:var(--muted);margin-top:2px}
.mini-res .pill{margin-left:auto}
@media (min-width:760px){ .f3{padding:28px 30px} }

/* ==================================== 4 — before / after ================= */
.ba{display:grid;gap:18px;margin-top:38px;align-items:start}
@media (min-width:1000px){ .ba{grid-template-columns:1fr 56px 1.12fr;gap:0} }

.ba-col{
  background:var(--ground-3);border:1px solid var(--hair);border-radius:var(--r-xl);padding:22px;
}
.ba-lbl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E817A;margin-bottom:18px}
.ba-steps{display:grid;gap:10px}
.man{
  display:flex;align-items:center;gap:12px;
  background:#161616;border:1px solid rgba(243,244,239,.07);border-radius:13px;padding:11px 13px;
  opacity:.62;
}
.man b{
  flex:none;width:22px;height:22px;border-radius:7px;background:#222;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#8A8D84;
}
.man .mk{--mk:20px;filter:grayscale(1);opacity:.8}
.man span{font-size:13.5px;color:#9A9D95;letter-spacing:-.01em;line-height:1.35}
.ba-note{margin-top:16px;font-size:13px;color:#7E817A;line-height:1.5}

/* the arrow between the two columns */
.ba-arrow{
  display:flex;align-items:center;justify-content:center;padding:4px 0;
}
.ba-arrow svg{width:56px;height:24px;overflow:visible}
.ba-arrow .aline{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:7 8;opacity:.8;
  filter:drop-shadow(0 0 6px rgba(198,255,52,.5));
}
.ba-arrow .ahead{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(198,255,52,.5))}
@media (min-width:1000px){ .ba-arrow{padding:0;align-self:center} }
@media (max-width:999px){ .ba-arrow svg{transform:rotate(90deg);margin:10px 0} }

/* the employee card (the bright side) */
.ba-col--emp{
  background:linear-gradient(168deg,#242424,#1A1A1A);
  border-color:rgba(198,255,52,.24);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 90px -40px rgba(198,255,52,.4);
}
.emp-hd{display:flex;align-items:center;gap:12px}
.emp-av{
  flex:none;width:44px;height:44px;border-radius:13px;
  background:linear-gradient(160deg,#232323,#171717);
  border:1px solid rgba(198,255,52,.32);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 26px -6px rgba(198,255,52,.4);
}
.emp-av svg{width:56%;height:56%}
.emp-nm{font-size:17.5px;font-weight:650;letter-spacing:-.025em}
.emp-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.emp-hd .pill{margin-left:auto}
.blk{margin-top:20px}
.blk-lbl{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#7E817A;margin-bottom:10px}
.blk p{font-size:14px;color:var(--text);line-height:1.5}
.src-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(243,244,239,.07)}
.src-row:last-child{border-bottom:0}
.src-row .mk{--mk:26px}
.src-row b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.src-row span{font-size:12.5px;color:var(--muted);margin-left:auto;text-align:right}
.sched{
  display:flex;align-items:center;gap:9px;margin-top:16px;
  background:rgba(243,244,239,.05);border:1px solid var(--hair);border-radius:11px;padding:10px 13px;
  font-size:13.5px;
}
.sched svg{width:16px;height:16px;color:var(--muted);flex:none}
.sched b{font-weight:600}
.sched span{color:var(--muted)}
.res-blk{
  margin-top:18px;background:#151515;border:1px solid rgba(198,255,52,.22);
  border-radius:var(--r-lg);padding:14px;
}
.res-hd{display:flex;align-items:center;gap:12px}
.res-thumb{
  flex:none;width:52px;height:52px;border-radius:11px;overflow:hidden;
  background:linear-gradient(140deg,#37421A,#1D2410);
  border:1px solid rgba(198,255,52,.24);
  display:flex;align-items:center;justify-content:center;
}
.res-thumb svg{width:52%;height:52%;color:rgba(198,255,52,.75)}
.res-hd .pill{margin-left:auto}
.res-t{font-size:14.5px;font-weight:650;letter-spacing:-.015em}
.res-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.res-foot{margin-top:12px;padding-top:11px;border-top:1px solid rgba(243,244,239,.08);font-size:12.5px;color:var(--muted)}

/* ==================================== 5 — the job flow ================== */
.jobflow{
  margin-top:36px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-xl);padding:26px 20px;
}
.jf-title{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E817A;margin-bottom:24px;
}
.jf-title a{color:var(--accent);text-transform:none;letter-spacing:0;font-size:13px}
.jf{display:grid;gap:0}
.jf-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.jf-tiles{
  display:flex;align-items:center;justify-content:center;
  min-height:60px;
}
.jf-tile{
  width:56px;height:56px;border-radius:16px;flex:none;
  background:var(--raised);border:1px solid var(--hair-2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.95);
}
.jf-tile + .jf-tile{margin-left:-14px}
.jf-tile .mk{--mk:26px}
.jf-tile[data-own]{background:#151515;border-color:rgba(198,255,52,.26)}
.jf-tile--res{
  background:linear-gradient(150deg,#2C2C2C,#1C1C1C);
  border-color:rgba(198,255,52,.36);
  box-shadow:0 0 34px -8px rgba(198,255,52,.45),0 12px 26px -12px rgba(0,0,0,.95);
}
.jf-nm{font-size:13.5px;font-weight:650;letter-spacing:-.015em;max-width:17ch}
.jf-sub{font-size:12px;color:var(--muted);line-height:1.35;max-width:19ch;margin-top:-4px}
.jf-link{height:34px;display:flex;align-items:center;justify-content:center}
.jf-link i{
  display:block;width:2px;height:100%;
  background:linear-gradient(to bottom,rgba(198,255,52,.7),rgba(198,255,52,.25));
  border-radius:2px;
  box-shadow:0 0 12px rgba(198,255,52,.5);
}
.jf-cap{
  margin-top:24px;text-align:center;font-size:15px;color:var(--muted);line-height:1.55;
  max-width:62ch;margin-inline:auto;
}
.jf-cap b{color:var(--text);font-weight:600}
@media (min-width:900px){
  .jobflow{padding:32px 26px}
  .jf{grid-template-columns:1fr 52px 1fr 52px 1fr 52px 1fr 52px 1fr;align-items:start}
  .jf-link{height:auto;padding-top:28px}
  .jf-link i{
    width:100%;height:2px;border-radius:2px;
    background:linear-gradient(to right,rgba(198,255,52,.25),rgba(198,255,52,.8),rgba(198,255,52,.25));
    box-shadow:0 0 14px rgba(198,255,52,.55);
  }
}

/* ==================================== 6 — hire it in a few taps ========= */
.hirerow{
  margin-top:36px;background:linear-gradient(168deg,#242424,#1A1A1A);
  border:1px solid rgba(198,255,52,.2);border-radius:var(--r-xl);padding:22px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  display:grid;gap:20px;
}
.hr-id{display:flex;align-items:center;gap:12px}
.hr-tag{
  font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:rgba(198,255,52,.12);
  border:1px solid rgba(198,255,52,.3);padding:3px 8px;border-radius:999px;
  display:inline-block;margin-bottom:6px;
}
.hr-nm{font-size:19px;font-weight:700;letter-spacing:-.03em}
.hr-id .pill{margin-left:auto}
.hr-cols{display:grid;gap:14px}
.hr-c dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E817A;margin-bottom:7px}
.hr-c dd{margin:0;font-size:14px;line-height:1.45}
.hr-apps{display:flex;gap:6px;align-items:center}
.hr-apps .mk{--mk:26px}
.hr-go{display:flex;flex-direction:column;gap:10px}
.hr-go .btn{width:100%}
.hr-note{font-size:12.5px;color:var(--muted);line-height:1.45}
@media (min-width:840px){
  .hirerow{padding:26px 28px;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}
  .hr-cols{grid-template-columns:repeat(4,auto);gap:26px;justify-content:end}
  .hr-id .pill{margin-left:16px}
  .hr-go{width:190px}
}
.joblist{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:28px}
.jl{
  font-size:13.5px;color:var(--muted);background:var(--surface);
  border:1px solid var(--hair);border-radius:999px;padding:8px 15px;
  transition:color .18s var(--e),border-color .18s var(--e);
}
a.jl:hover{color:var(--text);border-color:var(--hair-2)}

/* ==================================== 7 — ask Manager =================== */
.mgr{display:grid;gap:14px;margin-top:36px;align-items:center}
@media (min-width:1000px){ .mgr{grid-template-columns:1fr 40px 1fr 40px 1fr;gap:18px} }
.mgr-ar{display:flex;align-items:center;justify-content:center}
.mgr-ar svg{width:26px;height:26px;color:rgba(198,255,52,.65);filter:drop-shadow(0 0 8px rgba(198,255,52,.45))}
@media (max-width:999px){ .mgr-ar svg{transform:rotate(90deg)} }
.msgcard{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);padding:20px;
}
.msg-hd{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:12.5px;color:var(--muted)}
.msg-hd .mk{--mk:22px}
.msg-bub{
  background:linear-gradient(150deg,rgba(198,255,52,.14),rgba(198,255,52,.06));
  border:1px solid rgba(198,255,52,.24);
  border-radius:16px 16px 16px 5px;padding:14px 16px;
  font-size:15px;line-height:1.5;color:var(--text);
}
.msg-t{margin-top:9px;font-size:11.5px;color:#7E817A}
.mgr-mid{text-align:center}
.mgr-mid .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7E817A;margin-bottom:12px}
.mgr-marks{display:flex;gap:8px;justify-content:center}
.mgr-marks .mk{--mk:38px;border-radius:11px}
.mgr-marks .mk[data-own]{background:#151515}
.safebar{
  margin-top:26px;background:var(--ground-3);border:1px solid rgba(198,255,52,.2);
  border-radius:var(--r-lg);padding:18px 20px;
  display:flex;gap:13px;align-items:flex-start;
}
.safebar svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:2px}
.safebar p{font-size:15px;line-height:1.5}
.safebar b{font-weight:650}

/* ==================================== 8 — closing ====================== */
.closing{padding:86px 0 96px;position:relative;overflow:hidden}
.closing::before{
  content:"";position:absolute;left:50%;bottom:-40%;
  width:min(1000px,140vw);aspect-ratio:1/1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(198,255,52,.10) 0%,rgba(198,255,52,0) 62%);
  pointer-events:none;
}
.closing .wrap{position:relative}
.closing h2{
  font-size:clamp(32px,7vw,62px);letter-spacing:-.045em;line-height:1.0;font-weight:800;
  max-width:17ch;margin-inline:auto;text-wrap:balance;
}

/* --------------------------------------------------------- reveal (js) -- */
.js [data-rev]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .6s var(--e)}
.js [data-rev].in{opacity:1;transform:none}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  .js [data-rev]{opacity:1;transform:none;transition:none}
  .js .acard{opacity:var(--o,1);--ty:0px;transition:none}
  .js .node{opacity:1;transform:none;transition:none}
  .js .bloom{opacity:1;transition:none;animation:none}
  .js .scene.in .bloom{animation:none;transform:translate(-50%,-50%) scale(1)}
  .js .streams .st-glow,
  .js .streams .st-halo,
  .js .streams .st-core{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .st-spark{display:none}
  .js .scene.in .st-spark{animation:none;opacity:0}
}

/* ============================================================================
   Real app captures — /assets/screenshots/*.png
   These are true iPhone captures of the shipping app, 900x1956 each. They
   replace the drawn mockups: on a sales call a real screen carries weight a
   CSS drawing never will.

   How they are framed:
   - the picture is laid into the bezel at its full width with height:auto, so
     it is only ever scaled uniformly — it is never stretched or squashed;
   - the screen box has a fixed aspect-ratio and clips, so whatever falls past
     the bottom of the frame simply bleeds off, exactly the way the drawn
     mockups behaved. The meaningful part of every screen is its top;
   - width/height on the <img> are the intrinsic pixels and the frame reserves
     its own box from aspect-ratio, so nothing moves when the image lands
     (no layout shift, lazy or not).
   Colours are written literally rather than as tokens because this block is
   shared verbatim by home.css, site.css and lander.css.
   ========================================================================= */
.appshot{margin:0 auto;width:100%;max-width:292px}
.appshot-fr{
  background:#0d0d0d;border:1px solid rgba(243,244,239,.13);
  border-radius:38px;padding:9px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.92);
}
.appshot-scr{
  position:relative;overflow:hidden;
  border-radius:30px;background:#171717;
  aspect-ratio:9/17;
}
.appshot-scr img{display:block;width:100%;height:auto;border:0}

/* Some screens say everything they need to in their top half. Those get a
   shorter frame, open at the bottom, so it reads as the top of a phone
   deliberately cropped rather than as a stubby device. */
.appshot--short .appshot-fr{
  padding-bottom:0;border-bottom:0;
  border-bottom-left-radius:17px;border-bottom-right-radius:17px;
}
.appshot--short .appshot-scr{
  aspect-ratio:45/57;
  border-bottom-left-radius:13px;border-bottom-right-radius:13px;
}

.appshot-cap{
  margin:13px auto 0;max-width:34ch;
  text-align:center;font-size:13px;line-height:1.5;color:#A7AAA1;
}
.appshot-cap b{color:#F3F4EF;font-weight:600}

/* Two or three captures in a row. Single column on a phone — these are tall
   pictures and side-by-side would shrink them to nothing. */
.shotrow{display:grid;gap:36px;margin-top:38px;justify-items:center}
@media (min-width:760px){
  .shotrow{grid-template-columns:repeat(2,1fr);gap:28px;align-items:start}
  .shotrow--3{grid-template-columns:repeat(3,1fr);gap:22px}
}