/* pakit2ools shared style. Tokens come from the Culture Map Plotter so every tool feels like one family. */
:root{
  --bg:#EDF2F5; --ink:#0E1A24; --ink2:#46596A; --ink3:#6F8191;
  --card:rgba(255,255,255,.76); --line:rgba(14,26,36,.10); --field:rgba(14,26,36,.045);
  --rail-a:#B9E5DB; --rail-b:#C5CBF7; --accent:#1F6FEB; --accent-ink:#FFFFFF; --good:#1A9E73;
  --shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 14px 34px -18px rgba(14,26,36,.28);
  --mesh-a:rgba(61,214,160,.26); --mesh-b:rgba(79,140,255,.22); --mesh-c:rgba(255,159,67,.16);
  --font-d:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --font-b:'Instrument Sans','Avenir Next',system-ui,sans-serif;
  --font-m:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#081015; --ink:#E7EEF4; --ink2:#9CB0C1; --ink3:#7A8E9F;
    --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.10); --field:rgba(255,255,255,.06);
    --rail-a:#1D4B47; --rail-b:#2D3270; --accent:#5B9BFF; --accent-ink:#06101A; --good:#3FD0A0;
    --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px -22px rgba(0,0,0,.85);
    --mesh-a:rgba(61,214,160,.14); --mesh-b:rgba(79,140,255,.16); --mesh-c:rgba(255,159,67,.08);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font-b);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52rem 34rem at 8% -6%,var(--mesh-a),transparent 62%),
    radial-gradient(46rem 34rem at 96% 4%,var(--mesh-b),transparent 60%),
    radial-gradient(40rem 30rem at 70% 108%,var(--mesh-c),transparent 62%)}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:99px;z-index:10}
.skip:focus{left:16px}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}

/* Header */
.site-head{padding-block:20px}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 1.25rem/1 var(--font-d);letter-spacing:-.03em}
.brand .mark{width:48px;height:48px;flex:none}
.brand b{color:var(--accent);font-weight:700}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.nav a{display:inline-block;padding:8px 12px;border-radius:99px;color:var(--ink2);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{background:var(--field);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}

main{flex:1}

/* Hero */
.hero{padding-block:clamp(32px,7vw,88px) clamp(24px,4vw,48px)}
.eyebrow{font:500 12px/1 var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 16px}
h1{margin:0;font:700 clamp(2.1rem,5.6vw,3.8rem)/1.02 var(--font-d);letter-spacing:-.035em;text-wrap:balance}
.lede{margin:18px 0 0;font-size:clamp(1.05rem,1.8vw,1.2rem);color:var(--ink2);max-width:40rem;text-wrap:pretty}
.promises{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.promises li{font:500 .85rem/1 var(--font-b);color:var(--ink2);border:1px solid var(--line);background:var(--card);border-radius:99px;padding:9px 14px}

/* Tool grid */
.section-title{font:600 1.35rem/1.2 var(--font-d);letter-spacing:-.015em;margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.tool{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.tool:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.tool h3{margin:0;font:600 1.2rem/1.2 var(--font-d);letter-spacing:-.01em}
.tool p{margin:0;color:var(--ink2);font-size:.95rem}
.tool .go{margin-top:auto;font-weight:600;color:var(--accent);font-size:.92rem}
.tool .preview{height:64px;border-radius:14px;background:var(--field);position:relative;overflow:hidden}
.tool .preview i{position:absolute;left:12px;right:12px;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--rail-a),var(--rail-b))}
.tool .preview i:nth-child(1){top:16px}.tool .preview i:nth-child(2){top:38px}
.tool .preview s{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
.tag{align-self:flex-start;font:500 10.5px/1 var(--font-m);letter-spacing:.06em;text-transform:uppercase;color:var(--good);border:1px solid currentColor;border-radius:99px;padding:5px 8px}
.tool.soon{box-shadow:none;background:transparent;border-style:dashed}
.tool.soon:hover{transform:none}
.tool.soon .tag{color:var(--ink3)}

/* Prose pages */
.page{padding-block:clamp(28px,6vw,64px)}
.prose{font-size:1.05rem}
.prose h1{font-size:clamp(2rem,5vw,3rem)}
.prose h2{font:600 1.35rem/1.25 var(--font-d);letter-spacing:-.015em;margin:2.2em 0 .5em}
.prose h3{font:600 1.1rem/1.3 var(--font-d);margin:1.6em 0 .4em}
.prose p,.prose li{color:var(--ink2);text-wrap:pretty}
.prose strong{color:var(--ink)}
.prose ul{padding-left:1.2em}
.prose li{margin:.35em 0}
.callout{margin:24px 0;padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.callout p{margin:0}
.ref{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.ref:first-of-type{border-top:0;padding-top:0}
.ref h3{margin-top:0}
.small{font-size:.9rem;color:var(--ink3)}

/* Footer */
.site-foot{margin-top:clamp(40px,8vw,96px);padding-block:28px 36px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink3)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-foot a{color:var(--ink2);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
@media print{.mesh,.site-head nav,.site-foot nav{display:none}body{background:#fff;color:#000}}