/* Runbook — Magnet Board
   Scene: the whiteboard in a shop office at seven in the morning. Every job on
   the wall is a magnet you can pick up and move, so every card on this page is
   one: generously rounded, slightly off-square, and floating on a four-layer
   shadow stack that reads as "this is liftable".
   Rules: one electric blue does every interactive job in the product. The mint
   only ever appears inside illustrations, never on a control. */

:root{
  --board:#F7F8FA;        /* the whiteboard */
  --surface:#FFFFFF;
  --ink:#0E1116;
  --ink-68:rgba(14,17,22,.7);
  --ink-44:rgba(14,17,22,.46);
  --blue:#2B59FF;
  --mint:#CFF3E4;         /* illustration only */
  --line:#E3E7EE;

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --page:1180px;
  --pad:clamp(20px,5vw,64px);

  /* the magnet: four layers, so it reads as hovering off the board */
  --float:
    0 152px 61px rgba(14,17,22,.01),
    0  85px 51px rgba(14,17,22,.04),
    0  38px 38px rgba(14,17,22,.07),
    0   9px 21px rgba(14,17,22,.09);
  --float-sm:
    0 34px 26px rgba(14,17,22,.04),
    0 12px 14px rgba(14,17,22,.06),
    0  3px  6px rgba(14,17,22,.07);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--board); color:var(--ink);
  font-family:var(--body); font-size:clamp(15.5px,1.02vw,17px); line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0; line-height:1; letter-spacing:-.05em; }
a{ color:inherit; }
/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img,svg{ max-width:100%; height:auto; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

.label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:0 0 14px; }

/* ---- controls: full pill, and only ever blue */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--blue); color:#fff; border:1.5px solid var(--blue);
  border-radius:50px; padding:14px 28px;
  font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:-.01em;
  box-shadow:var(--float-sm);
  transition:transform .18s cubic-bezier(.2,.8,.3,1.1), box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--float); }
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn-lg{ padding:17px 36px; font-size:17px; }
.btn-line{ background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:none; }
.btn-line:hover{ border-color:var(--blue); color:var(--blue); box-shadow:var(--float-sm); }
.btn-wide{ display:block; width:100%; }

/* ---- nav */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:22px; padding:14px var(--pad);
  background:rgba(247,248,250,.88); backdrop-filter:blur(12px);
}
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.05em; text-decoration:none; }
.mark{ width:24px; height:24px; color:var(--blue); }
.links{ display:flex; gap:26px; margin-left:auto; }
.links a{ font-size:14.5px; font-weight:500; color:var(--ink-68); text-decoration:none; }
.links a:hover{ color:var(--blue); }
@media (max-width:800px){ .links{ display:none; } .nav .btn-sm{ margin-left:auto; } }

/* ---- hero */
.hero{
  max-width:var(--page); margin:0 auto;
  padding:clamp(40px,6vw,88px) var(--pad) clamp(32px,4vw,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,60px); align-items:center;
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } }
.pill{
  display:inline-block; margin:0 0 22px; padding:8px 16px;
  background:var(--surface); color:var(--ink-68); border-radius:50px;
  box-shadow:var(--float-sm);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.hero h1{ font-size:clamp(42px,6.4vw,84px); margin-bottom:22px; }
.hero .lede{ font-size:clamp(16.5px,1.4vw,19.5px); color:var(--ink-68); max-width:44ch; margin:0 0 30px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:11px; margin-bottom:18px; }
.micro{ margin:0; font-family:var(--mono); font-size:11.5px; color:var(--ink-44); letter-spacing:.02em; }

/* ---- the board: cards pinned to it, each one tilted a little */
.hero-diagram{ position:relative; }
.hero-diagram svg{ width:100%; height:auto; display:block; }
.magnets{ display:grid; gap:14px; }
.magnet{
  background:var(--surface); border-radius:26px; padding:18px 20px;
  box-shadow:var(--float-sm);
}
.magnet:nth-child(1){ transform:rotate(-1.4deg); }
.magnet:nth-child(2){ transform:rotate(.9deg); margin-left:8%; }
.magnet:nth-child(3){ transform:rotate(-.6deg); margin-right:6%; }
.magnet-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.magnet-dot{ width:11px; height:11px; border-radius:50%; background:var(--blue); flex:none; }
.magnet--done .magnet-dot{ background:var(--mint); box-shadow:inset 0 0 0 2px var(--blue); }
.magnet--idle .magnet-dot{ background:var(--line); }
.magnet-when{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-44); margin:0 0 0 auto; }
.magnet h3{ font-size:17px; margin-bottom:6px; letter-spacing:-.03em; }
.magnet p{ margin:0; font-size:14px; color:var(--ink-68); }
.magnet-crew{ display:flex; align-items:center; gap:6px; margin-top:12px; }
.magnet-crew span{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  background:var(--board); border-radius:50px; padding:4px 10px; color:var(--ink-68);
}

/* ---- trades strip */
.logos{ max-width:var(--page); margin:0 auto; padding:0 var(--pad) clamp(38px,5vw,66px); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logos p{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-44); }
.logos ul{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.logos li{ padding:8px 16px; border-radius:50px; font-size:13.5px; font-weight:500; color:var(--ink-68); background:var(--surface); box-shadow:var(--float-sm); }

/* ---- sections */
.section{ max-width:var(--page); margin:0 auto; padding:clamp(48px,6vw,92px) var(--pad); }
.section--dark{ max-width:none; background:var(--ink); color:var(--board); border-radius:44px; margin:0 clamp(10px,2vw,24px); }
.section--dark > *{ max-width:var(--page); margin-inline:auto; }
.section--dark .label{ color:var(--mint); }
.head{ max-width:50ch; margin-bottom:clamp(28px,3.4vw,46px); }
.head h2{ font-size:clamp(30px,4.2vw,56px); }
.head .sub{ color:var(--ink-68); margin:16px 0 0; }
.section--dark .head .sub{ color:rgba(247,248,250,.66); }

/* ---- feature cards: big magnets */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:18px; }
.card{
  background:var(--surface); border-radius:40px; padding:32px 30px 34px;
  box-shadow:var(--float-sm);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.1), box-shadow .2s ease;
}
.card:hover{ transform:translateY(-6px) rotate(-.7deg); box-shadow:var(--float); }
.ic{ width:40px; height:40px; color:var(--blue); margin-bottom:22px; }
.ic svg{ width:100%; height:100%; display:block; }
.card h3{ font-size:21px; margin-bottom:11px; letter-spacing:-.035em; }
.card p{ margin:0; color:var(--ink-68); font-size:15.5px; }

/* ---- steps */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:30px 26px; }
.steps span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--mint); margin-bottom:16px; }
.steps h3{ font-size:19px; margin-bottom:10px; letter-spacing:-.035em; }
.steps p{ margin:0; color:rgba(247,248,250,.66); font-size:15px; }

/* ---- pricing */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; align-items:start; }
.tier{ background:var(--surface); border-radius:40px; padding:32px 30px 34px; box-shadow:var(--float-sm); }
.tier--on{ box-shadow:var(--float); transform:translateY(-8px); }
.flag{ margin:0 0 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.tier h3{ font-size:18px; margin-bottom:14px; letter-spacing:-.03em; }
.price{ font-family:var(--display); font-weight:700; font-size:46px; letter-spacing:-.055em; margin:0 0 8px; }
.price span{ font-family:var(--body); font-weight:400; font-size:15px; color:var(--ink-44); letter-spacing:0; }
.tier-for{ margin:0 0 22px; font-size:14.5px; color:var(--ink-68); }
.tier ul{ list-style:none; padding:0; margin:0 0 26px; }
.tier li{ padding:9px 0 9px 26px; position:relative; font-size:15px; color:var(--ink-68); }
.tier li::before{
  content:''; position:absolute; left:2px; top:15px;
  width:10px; height:5px; border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

/* ---- cta */
.cta{ max-width:var(--page); margin:0 auto; padding:clamp(52px,7vw,104px) var(--pad); text-align:center; }
.cta h2{ font-size:clamp(32px,4.6vw,60px); margin-bottom:16px; }
.cta p{ color:var(--ink-68); margin:0 0 32px; }

/* ---- footer */
.foot{ max-width:var(--page); margin:0 auto; padding:clamp(38px,5vw,64px) var(--pad); }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; }
@media (max-width:700px){ .foot-grid{ grid-template-columns:1fr; } }
.foot p{ margin:0 0 7px; font-size:14.5px; color:var(--ink-68); }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--blue); }
.foot-mark{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.05em; color:var(--ink) !important; }
.fine{ margin-top:26px; font-family:var(--mono); font-size:11px; line-height:1.8; color:var(--ink-44); max-width:66ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:1px;
  background:var(--surface); color:var(--ink);
  padding:11px 20px; border-radius:50px; text-decoration:none; text-align:center;
  font-size:11px; letter-spacing:.04em; line-height:1.5;
  box-shadow:var(--float);
}
.demo-tag span{ font-family:var(--mono); color:var(--ink-44); text-transform:uppercase; font-size:9.5px; letter-spacing:.13em; }
.demo-tag strong{ font-weight:600; font-size:12px; color:var(--blue); }
.demo-tag:hover{ background:var(--blue); color:#fff; }
.demo-tag:hover span,.demo-tag:hover strong{ color:#fff; }


/* ---- one photograph, to keep the product honest about who uses it */
.crew-band{
  max-width:var(--page); margin:0 auto; padding:clamp(20px,3vw,40px) var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:center;
}
@media (max-width:860px){ .crew-band{ grid-template-columns:1fr; } }
.crew-band img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:40px; box-shadow:var(--float-sm); }
.crew-copy h2{ font-size:clamp(26px,3.2vw,40px); margin-bottom:16px; }
.crew-copy p{ margin:0; color:var(--ink-68); max-width:46ch; }