/* ============================================================
   TOOLS PAGE
   The device: five working products, handed over before any money
   changes hands. The rest of the site argues in prose that we
   hand-build software and you keep it — this page just gives you
   some and lets you check.

   Colour carries meaning here, it is not decoration, same rule as
   the services page. Each tool inherits --c from the service it
   demonstrates: violet for web applications, verdant for
   interactive tools, amber for AI. The rack tiles, the detail
   rows and the bridge table all read from it.
   ============================================================ */

/* ============================================================
   Hero rack
   Five tiles, every one a live link. The page's claim is that the
   tools are real, so the tools are the first thing on it — no
   sales paragraph standing between the reader and the product.
   Six columns: three tiles of two on row one, two tiles of three
   on row two, so the last pair reads as the bigger products.
   ============================================================ */
.rack{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--s18);margin-top:var(--s60);
}
.tool{
  grid-column:span 2;
  display:flex;flex-direction:column;
  padding:var(--s30) var(--s24) var(--s24);
  border-radius:var(--r-3xl);border:1px solid var(--hair);
  background:rgba(255,255,255,.028);
  position:relative;isolation:isolate;overflow:hidden;
  opacity:0;transform:translateY(18px);
  transition:
    opacity .85s var(--ease) var(--d,0s),
    transform .85s var(--ease) var(--d,0s),
    border-color .45s ease,
    background .45s ease;
}
.tool--wide{grid-column:span 3}
.is-in .tool{opacity:1;transform:none}
.is-in .tool:hover{transform:translateY(-5px);background:rgba(255,255,255,.055);border-color:var(--c)}

/* the accent hairline draws itself in as the tile arrives */
.tool::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--c),transparent 78%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.05s var(--ease) var(--d,0s);
}
.is-in .tool::before{transform:scaleX(1)}

.tool__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s18);margin-bottom:var(--s24)}
.tool__glyph{
  width:46px;height:46px;flex:none;border-radius:14px;
  display:grid;place-items:center;color:var(--c);
  border:1px solid var(--hair-2);background:rgba(255,255,255,.03);
  transition:background .45s ease,border-color .45s ease,transform .6s var(--ease);
}
.tool:hover .tool__glyph{background:rgba(255,255,255,.07);border-color:var(--c);transform:translateY(-2px) rotate(-6deg)}
.tool__tag{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c);padding:5px 11px;border-radius:var(--r-full);
  border:1px solid var(--hair-2);white-space:nowrap;
}
.tool__t{
  font-size:var(--t-2xs);font-weight:var(--fw-r);
  letter-spacing:-0.035em;line-height:1.18;color:#fff;
  margin-bottom:var(--s12);
}
.tool__d{font-size:14px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.6}

.tool__feats{display:flex;flex-direction:column;gap:9px;margin-top:var(--s24)}
.tool__feats li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.45;
}
.tool__feats li::before{content:"";width:4px;height:4px;flex:none;margin-top:7px;border-radius:50%;background:var(--c)}

/* footer pins to the bottom so a row of tiles ends on one line */
.tool__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s18);
  margin-top:auto;padding-top:var(--s24);
}
.tool__cost{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6a6a6a}
.tool__cost b{display:block;font-weight:var(--fw-r);font-size:13px;letter-spacing:.04em;color:#fff;margin-bottom:4px;text-transform:none}
.tool__go{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:var(--fw-sb);letter-spacing:.02em;color:#fff;
  padding:10px 17px;border-radius:var(--r-full);
  border:1px solid var(--hair-2);white-space:nowrap;
  transition:background .35s ease,border-color .35s ease,gap .4s var(--ease);
}
.tool:hover .tool__go{background:var(--c);border-color:var(--c);gap:13px;color:#000}
.tool__go i{font-style:normal;transition:transform .45s var(--ease)}
.tool:hover .tool__go i{transform:translateX(2px)}

/* amber and verdant carry black text on the filled state, violet needs white */
.tool[style*="8052ff"]:hover .tool__go{color:#fff}

/* ============================================================
   Why they're free
   The site refuses to hide numbers, so it can't hide a motive
   either. Four reasons, stated plainly, before anyone wonders.
   ============================================================ */
.pledge{border-top:1px solid var(--hair);padding-block:var(--s120)}
.pledge__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.pledge__item{
  background:#000;padding:var(--s36) var(--s24);
  transition:background .5s ease;
}
.pledge__item:hover{background:rgba(255,255,255,.03)}
.pledge__n{display:block;font-size:11px;letter-spacing:.2em;color:var(--spark);margin-bottom:var(--s18)}
.pledge__t{font-size:19px;font-weight:var(--fw-r);letter-spacing:-0.03em;color:#fff;margin-bottom:var(--s12);line-height:1.25}
.pledge__d{font-size:14px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.6}

/* ============================================================
   Detail rows
   One per tool, same two-column ledger the services page uses for
   its scope cards — what it does on the left, what it doesn't on
   the right, because the second list is the one that builds trust.
   ============================================================ */
.kits{border-top:1px solid var(--hair);padding-block:var(--s120)}
.kit{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--s60);align-items:start;
  padding-block:var(--s60);border-top:1px solid var(--hair);
  position:relative;scroll-margin-top:calc(var(--nav-h) + var(--s30));
}
.kit::after{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--c);transition:width 1.3s var(--ease);
}
.kit.is-in::after{width:100%}
.kit:first-of-type{border-top:0;padding-top:0}
.kit:first-of-type::after{display:none}

.kit__top{display:flex;align-items:center;gap:var(--s18);margin-bottom:var(--s24)}
.kit__glyph{
  width:54px;height:54px;flex:none;border-radius:17px;
  display:grid;place-items:center;color:var(--c);
  border:1px solid var(--hair-2);background:rgba(255,255,255,.03);
  transition:background .45s ease,border-color .45s ease,transform .6s var(--ease);
}
.kit:hover .kit__glyph{background:rgba(255,255,255,.06);border-color:var(--c);transform:translateY(-3px) rotate(-5deg)}
.kit__n{display:block;font-size:var(--t-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.kit__ix{display:block;font-size:11px;letter-spacing:.22em;color:#3d3d3d;margin-top:7px;font-variant-numeric:tabular-nums}
.kit__t{font-size:clamp(26px,3.4vw,var(--t-sm));font-weight:var(--fw-r);letter-spacing:-0.04em;line-height:1.1;margin-bottom:var(--s18)}

.kit__best{
  font-size:14px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.6;
  padding:13px var(--s18);border-radius:12px;margin-bottom:var(--s24);
  background:rgba(255,255,255,.028);border-left:2px solid var(--c);
}
.kit__best b{
  display:block;margin-bottom:6px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c);font-weight:var(--fw-sb);
}
.kit__d{font-size:16px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.6;max-width:44ch}

.kit__url{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--s24);
  font-size:var(--t-caption);color:var(--ash);letter-spacing:.04em;
  background:rgba(255,255,255,.05);padding:6px 14px;border-radius:var(--r-full);
}
.kit__url::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}

.kit__cta{display:flex;align-items:center;gap:var(--s24);flex-wrap:wrap;margin-top:var(--s30)}

.kit__lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s36)}

/* ============================================================
   Bridge
   The point of the page. Each free tool names the paid service it
   is a working sample of, and the number that service starts at —
   so nobody has to guess what having one of their own would cost.
   ============================================================ */
.bridge{border-top:1px solid var(--hair);padding-block:var(--s120)}
.brow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 132px;
  align-items:center;gap:var(--s24);
  padding-block:var(--s24);border-bottom:1px solid var(--hair);
  position:relative;isolation:isolate;
  transition:padding-left .5s var(--ease);
}
.brow:first-child{border-top:1px solid var(--hair)}
.brow::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 62%);
  transition:opacity .4s ease;
}
.brow:hover::after{opacity:1}
.brow:hover{padding-left:var(--s12)}
.brow__from{font-size:16px;font-weight:var(--fw-xl);color:#fff;letter-spacing:-0.02em}
.brow__arw{font-size:15px;color:#3d3d3d;text-align:center;transition:color .35s ease,transform .5s var(--ease)}
.brow:hover .brow__arw{color:var(--c);transform:translateX(3px)}
.brow__to{font-size:14px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.5;transition:color .35s ease}
.brow:hover .brow__to{color:var(--mist)}
.brow__to b{display:block;font-weight:var(--fw-r);font-size:15px;color:var(--c);margin-bottom:4px;letter-spacing:-0.02em}
.brow__p{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5a5a5a;text-align:right;white-space:nowrap}
.brow__p b{
  display:block;margin-top:5px;
  font-size:19px;font-weight:var(--fw-r);letter-spacing:-0.035em;
  color:#fff;text-transform:none;font-variant-numeric:tabular-nums;
}

/* ============================================================
   Homepage teaser
   The same rack, shrunk down for the homepage teaser.
   ============================================================ */
.rack--teaser{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.rack--teaser .tool{grid-column:span 1;padding:var(--s24) var(--s18) var(--s18)}
.rack--teaser .tool__t{font-size:17px;margin-bottom:10px}
.rack--teaser .tool__d{font-size:13px}
.rack--teaser .tool__foot{padding-top:var(--s18)}
.rack--teaser .tool__go{padding:8px 14px;font-size:12px}

/* ============================================================
   Responsive
   ============================================================ */
/* seven teaser tiles sit as four then three; they stop being readable
   well before the tiles themselves run out of room, so drop to three */
@media (max-width:1280px){
  .rack--teaser{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1024px){
  .rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool,.tool--wide{grid-column:span 1}
  .pledge__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit{grid-template-columns:1fr;gap:var(--s36)}
  .rack--teaser{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .rack{grid-template-columns:1fr}
  .pledge__grid{grid-template-columns:1fr}
  .kit__lists{grid-template-columns:1fr;gap:var(--s30)}
  .rack--teaser{grid-template-columns:1fr}

  /* the bridge collapses to a stacked card — the arrow column and
     the price column stop making sense side by side */
  .brow{grid-template-columns:minmax(0,1fr) auto;gap:var(--s12) var(--s18)}
  .brow__arw{display:none}
  .brow__to{grid-column:1/-1}
  .brow__p{text-align:left;grid-column:1/-1}
  .brow__p b{display:inline;margin-left:8px}
}

@media (hover:none){
  .is-in .tool:hover{transform:none}
  .brow:hover{padding-left:0}
}

@media (prefers-reduced-motion:reduce){
  .tool{opacity:1;transform:none}
  .tool::before{transform:none}
  .kit::after{width:100%;transition:none}
}