/* ============================================
   GUSILABS — styles.css
   Tokens: paper #F6F5F1 · ink #212A38 · steel #2F6F91 · signal #D98E2B
   Type: Space Grotesk (display/UI) · JetBrains Mono (data/formulas)
   ============================================ */

:root{
  --paper: #F6F5F1;
  --paper-2: #ECE9DE;
  --ink: #212A38;
  --ink-soft: #566073;
  --steel: #2F6F91;
  --steel-dark: #1F4F68;
  --signal: #D98E2B;
  --line: #DAD6C9;
  --white: #FFFFFF;
  --ok: #2F7A52;

  --radius-s: 8px;
  --radius-m: 14px;
  --gutter: clamp(20px, 5vw, 48px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;tab-size:2}
body{
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.08;letter-spacing:-0.01em}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}

.skip-link{
  position:fixed;top:-100px;left:1rem;padding:.6rem 1rem;
  background:var(--ink);color:var(--paper);z-index:9999;border-radius:8px;font-weight:600;
}
.skip-link:focus{top:1rem}

.mono{font-family:'JetBrains Mono',monospace}

/* ---------- 2. Layout shell ---------- */
.wrap{max-width:1040px;margin:0 auto;padding-inline:var(--gutter)}

.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;
}
.logo{
  display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:18px;letter-spacing:-0.01em;
}
.logo__mark{
  width:26px;height:26px;border-radius:6px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--signal);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
}
.nav-link{
  font-size:14px;font-weight:600;color:var(--ink-soft);
  padding:8px 12px;border-radius:8px;
  transition:color .15s var(--ease-out), background .15s var(--ease-out);
}
.nav-link:hover{color:var(--ink);background:var(--paper-2)}

.site-footer{
  border-top:1px solid var(--line);
  margin-top:64px;
  padding-block:28px;
}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between;
  font-size:13px;color:var(--ink-soft);
}
.site-footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- 3. Hub / home ---------- */
.hero-hub{padding-block:48px 32px}
.hero-hub__eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;color:var(--steel-dark);font-weight:600;
}
.hero-hub h1{
  font-size:clamp(32px,5.6vw,50px);
  margin-top:8px;max-width:14ch;
}
.hero-hub p{
  margin-top:14px;max-width:52ch;color:var(--ink-soft);font-size:17px;
}

.search-row{
  margin-top:26px;display:flex;gap:10px;max-width:480px;
}
.search-row input{
  flex:1;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--radius-s);background:var(--white);font:inherit;font-size:15px;
}
.search-row input:focus-visible{outline:2px solid var(--steel);outline-offset:1px}

.category-block{margin-top:44px}
.category-block h2{
  font-size:14px;font-weight:700;
  color:var(--ink-soft);
  padding-bottom:10px;border-bottom:1px solid var(--line);
  margin-bottom:18px;
}

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:14px;
}
.tool-card-mini{
  display:block;padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:var(--radius-m);
  background:var(--white);
  transition:border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.tool-card-mini:not(.is-soon):hover{
  border-color:var(--steel);transform:translateY(-2px);
}
.tool-card-mini__title{font-weight:700;font-size:15.5px}
.tool-card-mini__desc{font-size:13.5px;color:var(--ink-soft);margin-top:4px}
.tool-card-mini.is-soon{opacity:.55;cursor:default}
.tool-card-mini .tag{
  display:inline-block;margin-top:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--steel-dark);background:#E7F0F4;
  padding:2px 8px;border-radius:20px;
}
.tool-card-mini.is-soon .tag{background:var(--paper-2);color:var(--ink-soft)}

/* ---------- 4. Tool page anatomy ---------- */
.tool-hero{padding-block:36px 0}
.tool-hero__eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;
  color:var(--steel-dark);font-weight:600;
}
.tool-hero h1{font-size:clamp(26px,4.6vw,38px);margin-top:6px}
.tool-hero__sub{color:var(--ink-soft);margin-top:8px;font-size:16px;max-width:56ch}

.tool-card{
  margin-top:26px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:clamp(20px,4vw,32px);
}

.field-grid{
  display:grid;grid-template-columns:1fr;gap:16px;
}
@media (min-width:720px){
  .field-grid{grid-template-columns:1fr 1fr 1fr}
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--ink-soft)}
.field .field-hint{font-size:12px;color:var(--ink-soft);font-weight:400}
.field-input-row{display:flex;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--paper)}
.field-input-row:focus-within{outline:2px solid var(--steel);outline-offset:1px}
.field-input-row input{
  flex:1;border:0;background:transparent;padding:12px 12px;font:inherit;font-size:16px;
  font-family:'JetBrains Mono',monospace;
}
.field-input-row input:focus-visible{outline:none}
.field-input-row select{
  flex:1;border:0;background:transparent;padding:12px;font:inherit;font-size:15px;
  color:var(--ink);cursor:pointer;
}
.field-input-row select:focus-visible{outline:none}
.field-input-row .unit{
  display:flex;align-items:center;padding:0 12px;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-soft);
  background:var(--paper-2);border-left:1px solid var(--line);
}
.field.is-solved .field-input-row{border-color:var(--steel)}
.field.is-solved input{color:var(--steel-dark);font-weight:700}

.tool-actions{
  display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--radius-s);
  font-weight:700;font-size:15px;
  transition:transform .15s var(--ease-out), background .15s var(--ease-out);
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--steel);color:var(--ink)}

.result-line{
  font-size:13px;color:var(--ink-soft);
}
.result-line strong{color:var(--ink);font-family:'JetBrains Mono',monospace}

.privacy-note{
  margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start;
}

/* ---------- 5. Ad slots (placeholders) ---------- */
.ad-slot{
  min-height:90px;margin-block:28px;
  border:1px dashed var(--line);border-radius:var(--radius-s);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-soft);letter-spacing:.02em;
  background:repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 8px, var(--paper) 8px, var(--paper) 16px);
}

/* ---------- 6. Content sections ---------- */
.section{padding-block:8px}
.section h2{font-size:22px;margin-bottom:14px}

.steps{
  display:grid;gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{
  border:1px solid var(--line);border-radius:var(--radius-m);
  padding:18px;background:var(--white);
}
.step__index{
  font-family:'JetBrains Mono',monospace;color:var(--steel-dark);font-weight:700;font-size:14px;
}
.step h3{font-size:16px;margin-top:8px}
.step p{font-size:14px;color:var(--ink-soft);margin-top:6px}

.seo-copy{max-width:70ch;color:var(--ink-soft);font-size:15.5px}
.seo-copy p{margin-bottom:14px}
.seo-copy .formula{
  display:block;margin:18px 0;padding:14px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-s);
  font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--ink);
}

.faq{border-top:1px solid var(--line)}
.faq details{
  border-bottom:1px solid var(--line);padding-block:14px;
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:15px;
  list-style:none;display:flex;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--steel);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-soft);font-size:14.5px}

@media (prefers-reduced-motion: reduce){
  .btn,.tool-card-mini,.nav-link{transition:none}
}