/* ============================================================================
   PIXUALLY — shared site styles
   Edit aesthetics here once; every page updates.
   Page-specific (tool) styles live inline in each page's own <style> block.
   Per-page content width: set  style="--page-max:760px"  on <body> (default 860).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#ffffff; --card:#ffffff; --ink:#10131f; --muted:#5a6072; --line:#e7e9f0;
  --blue:#1768ff; --blue-press:#0f57e0; --cyan:#00c2e8; --track:#eef0f4;
  --radius:13px; --page-max:860px;
  --font-display:"Bricolage Grotesque","Inter",sans-serif;
  --font-body:"Inter",-apple-system,system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh;
  font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,.display{font-family:var(--font-display);}
::selection{background:var(--blue);color:#fff;}
*:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}

/* ---- nav (injected by site.js) ---- */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(18px,5vw,44px);background:rgba(255,255,255,.84);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em;font-size:18px;font-family:var(--font-display);}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--blue);display:block;box-shadow:0 0 10px rgba(23,104,255,.7);cursor:pointer;}
.navlinks{display:flex;gap:2px;align-items:center;}
.navlinks a{font-size:13px;font-weight:500;color:var(--muted);padding:6px 12px;border-radius:7px;transition:color .15s;}
.navlinks a:hover{color:var(--ink);}
.burger{display:none;background:none;border:none;color:var(--ink);font-size:20px;cursor:pointer;line-height:1;}
@media(max-width:600px){
  .burger{display:block;}
  .navlinks{position:absolute;top:100%;right:14px;flex-direction:column;align-items:flex-start;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:6px;display:none;min-width:150px;box-shadow:0 10px 30px rgba(16,19,31,.1);}
  .navlinks.open{display:flex;}
}

/* ---- page shell ---- */
.wrap{max-width:var(--page-max);margin:0 auto;padding:clamp(26px,5vw,48px) clamp(18px,5vw,44px);}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 12px;}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,50px);line-height:1.02;letter-spacing:-.03em;margin:0 0 12px;}
.sub{color:var(--muted);margin:0 0 28px;max-width:60ch;}
.section-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:38px 0 4px;}
.section-sub{font-size:13px;color:var(--muted);margin:0 0 16px;}

/* ---- buttons ---- */
.btn{font:13px/1 var(--font-body);font-weight:600;letter-spacing:.02em;border-radius:10px;padding:11px 16px;cursor:pointer;transition:all .15s;border:1px solid transparent;background:transparent;color:var(--ink);}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn.primary:hover{background:var(--blue-press);}

/* ---- email signup "net" (injected by site.js where <div data-net> appears) ---- */
.net{margin:38px 0 0;padding:24px;background:linear-gradient(135deg,#f2f6ff,#ecf9fd);border:1px solid #dce8fb;border-radius:18px;}
.net-h{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0 0 14px;}
.signup{display:flex;gap:8px;flex-wrap:wrap;max-width:560px;}
.signup input[type=email]{flex:1;min-width:190px;font:15px/1 var(--font-body);padding:12px 14px;border:1px solid var(--line);border-radius:11px;outline:none;background:#fff;transition:border-color .15s;}
.signup input[type=email]:focus{border-color:var(--blue);}
.signup button{font:14px/1 var(--font-body);font-weight:600;background:var(--blue);color:#fff;border:none;border-radius:11px;padding:12px 20px;cursor:pointer;transition:background .15s;}
.signup button:hover{background:var(--blue-press);}
.net-sub{font-size:12.5px;color:var(--muted);margin:12px 0 0;}
.net-sub a{color:var(--blue);font-weight:600;}
.net-hp{position:absolute;left:-9999px;}

/* ---- footer (injected by site.js) ---- */
footer{border-top:1px solid var(--line);max-width:var(--page-max);margin:48px auto 0;padding:24px clamp(18px,5vw,44px) 48px;
  display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);gap:16px;flex-wrap:wrap;}
footer .mark{font-family:var(--font-display);font-weight:700;color:var(--ink);}
footer .flinks a{color:var(--muted);}
footer .flinks a:hover{color:var(--ink);}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ---- "More from Pixually" strip (injected by site.js on tool pages) ---- */
.more{margin:44px 0 0;}
.more-h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 12px;}
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.more-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;transition:border-color .15s, transform .15s;}
.more-card:hover{border-color:var(--blue);transform:translateY(-2px);}
.more-card .chip{width:34px;height:34px;border-radius:9px;flex:0 0 auto;}
.more-card .mtxt{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.more-card .mtxt b{font-size:14px;font-weight:600;letter-spacing:-.01em;}
.more-card .mtxt i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-top:3px;}
