/* Stackfold HQ — stackfoldhq.com
   One screen, light. Tokens follow the Stackfold brand handoff (brand/tokens.css). */

@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/manrope-latin-800-normal.woff2") format("woff2")}

:root{
  --sf-ink:#111318;
  --sf-ink-muted:#55585F;
  --sf-ink-hover:#2A2E36;
  --sf-paper:#F6F6F4;
  --sf-surface:#FFFFFF;
  --sf-line:#E4E4E0;
  --sf-accent:#FF5A1F;        /* logo, focus ring only. Never text on light bg */
  --sf-accent-text:#C2410C;   /* links */

  --sf-font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sf-text-display:clamp(2.5rem,1.6rem + 3.6vw,4rem);
  --sf-text-body:clamp(1rem,.95rem + .25vw,1.125rem);

  --sf-radius-sm:8px;
  --sf-radius-lg:16px;
  --sf-focus-ring:0 0 0 2px var(--sf-surface),0 0 0 5px var(--sf-accent);
  --sf-ease:cubic-bezier(.2,.8,.2,1);
  --sf-duration:180ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--sf-paper);color:var(--sf-ink);font-family:var(--sf-font);
  font-size:var(--sf-text-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--sf-accent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:none;box-shadow:var(--sf-focus-ring);border-radius:var(--sf-radius-sm)}
.addr{font-style:normal}

.skip{position:absolute;left:16px;top:-100px;z-index:20;padding:12px 16px;background:var(--sf-ink);color:#fff;border-radius:var(--sf-radius-sm);font-weight:700}
.skip:focus{top:12px;text-decoration:none}

/* ---------- Layout: one screen ---------- */
.shell{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}

/* Header */
.top{position:sticky;top:0;z-index:5;background:var(--sf-surface);border-bottom:1px solid var(--sf-line)}
.top-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;min-height:44px}
.logo{display:block;height:32px;width:auto}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 20px;
  border-radius:var(--sf-radius-sm);background:var(--sf-ink);color:#fff;
  font-size:16px;font-weight:700;line-height:1;white-space:nowrap;
  transition:background var(--sf-duration) var(--sf-ease),transform var(--sf-duration) var(--sf-ease);
}
.btn:hover{background:var(--sf-ink-hover);color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn span{transition:transform var(--sf-duration) var(--sf-ease)}
.btn:hover span{transform:translateX(3px)}
.btn-sm{height:44px;padding:0 18px;font-size:15px}

/* Hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center;padding-top:64px;padding-bottom:64px}
.eyebrow{margin:0 0 20px;font-size:.8125rem;font-weight:700;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--sf-ink-muted)}
h1{margin:0 0 24px;max-width:14ch;font-size:var(--sf-text-display);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:var(--sf-ink)}
.lede{margin:0 0 32px;max-width:52ch;color:var(--sf-ink-muted)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.email{font-size:.875rem;font-weight:500;color:var(--sf-ink-muted)}
.stack{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:48px 0 0;padding:0;font-size:.875rem;font-weight:500;color:var(--sf-ink-muted)}
.stack li::before{content:"/ ";color:#B5B6B2}

.art{display:flex;justify-content:center}
.hero-mark{display:block;width:100%;max-width:320px;height:auto;overflow:visible}

/* Hover: "exploded view" — the planes pull apart like a technical drawing,
   construction lines draw in, and a dashed next layer settles on top. */
.hero-mark .pl,.hero-mark .ghost{transform-box:view-box;transition:transform 700ms var(--sf-ease),opacity 500ms var(--sf-ease)}
.hero-mark .guides line{stroke-width:.16;stroke-opacity:.22;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 600ms var(--sf-ease)}
.hero-mark .ghost{stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-dasharray:4 4;stroke-opacity:.45;opacity:0;transform:translateY(-6px)}
@media (hover:hover) and (pointer:fine){
  .art:hover .pl-1{transform:translateY(-10px);transition-delay:60ms}
  .art:hover .pl-3{transform:translateY(10px)}
  .art:hover .guides line{stroke-dashoffset:0;transition-delay:220ms}
  .art:hover .guides line:nth-child(3){transition-delay:300ms}
  .art:hover .ghost{opacity:1;transform:translateY(0);transition-delay:380ms}
}

/* Footer */
.foot{border-top:1px solid var(--sf-line)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px;padding-top:16px;padding-bottom:16px;font-size:.875rem;font-weight:500;color:var(--sf-ink-muted)}
.foot nav{display:flex;gap:8px 24px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--sf-ink-muted)}
.foot nav a:hover{color:var(--sf-ink)}

/* ---------- On-demand sheets (company / privacy / terms) ---------- */
.sheet{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:24px}
.sheet:target{display:flex}
.scrim{position:absolute;inset:0;background:rgba(17,19,24,.45)}
.scrim:hover{text-decoration:none}
.sheet-card{
  position:relative;width:100%;max-width:720px;max-height:calc(100svh - 48px);overflow:auto;
  background:var(--sf-surface);border:1px solid var(--sf-line);border-radius:var(--sf-radius-lg);padding:28px 32px 32px;
}
.sheet-head{
  position:sticky;top:-28px;margin:-28px -32px 20px;padding:18px 24px 14px 32px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--sf-surface);border-bottom:1px solid var(--sf-line);
}
.sheet-head h2{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.close{font-size:28px;line-height:1;color:var(--sf-ink-muted);width:44px;height:44px;display:grid;place-items:center;border-radius:var(--sf-radius-sm)}
.close:hover{color:var(--sf-ink);background:var(--sf-paper);text-decoration:none}

.details{margin:0;border:1px solid var(--sf-line);border-radius:var(--sf-radius-sm);overflow:hidden}
.details div{display:grid;grid-template-columns:170px 1fr;gap:4px 24px;padding:14px 18px;border-top:1px solid var(--sf-line)}
.details div:first-child{border-top:0}
.details div:nth-child(even){background:var(--sf-paper)}
.details dt{margin:0;padding-top:2px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sf-ink-muted)}
.details dd{margin:0;font-size:.9375rem;color:var(--sf-ink);word-break:break-word}

.prose{font-size:.9375rem;color:var(--sf-ink-muted)}
.prose h3{font-size:1rem;color:var(--sf-ink);margin:28px 0 6px;font-weight:700}
.prose p{margin:0 0 12px}
.prose ul{padding-left:20px}
.prose .updated{display:inline-block;margin:0 0 4px;padding:4px 10px;font-size:.8125rem;font-weight:500;color:var(--sf-ink-muted);background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:var(--sf-radius-sm)}

/* 404 */
.lost .hero{grid-template-columns:1fr}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .hero{grid-template-columns:1fr;gap:40px}
  .art{display:none}
}
@media (max-width:767px){
  .wrap{padding:0 16px}
  .top-in{height:64px}
  .logo{height:24px}
  .hero{padding-top:40px;padding-bottom:40px}
  .lede{margin-bottom:28px}
  .stack{margin-top:32px}
  .email{display:none}
  .sheet{padding:12px}
  .sheet-card{padding:22px 20px 24px;max-height:calc(100svh - 24px)}
  .sheet-head{top:-22px;margin:-22px -20px 16px;padding:12px 12px 10px 20px}
  .details div{grid-template-columns:1fr}
}
@media (max-height:760px) and (min-width:1024px){
  .hero{padding-top:40px;padding-bottom:40px}
  .stack{margin-top:32px}
  .hero-mark{max-width:240px}
}
@media (prefers-reduced-motion:reduce){
  :root{--sf-duration:0ms}
  .hero-mark .pl,.hero-mark .ghost,.hero-mark .guides line{transition:none}
}