/* Shared base for the larger in-browser tools (Pattern Studio, Link-in-Bio Builder,
   Social Mockup Studio, Bisibility SEO Studio). Each tool lives inside a .tool-app
   wrapper so its own reset and tokens never leak into the site chrome. */

.tool-section { padding: 3rem 0 4.5rem; }
.tool-section--flush { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 600px) { .tool-section--flush { padding-left: 1rem; padding-right: 1rem; } }

.tool-app {
  --disp: "Fraunces", Georgia, serif;
  --terra: #BF5A2E;
  --terra-deep: #A44A23;
  --sand: #D8D0BD;
  --bone: #EBE5D6;
  --muted: #6E705F;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

/* Scoped reset (the tools were built on a zero-margin reset) */
.tool-app *, .tool-app *::before, .tool-app *::after { margin: 0; padding: 0; box-sizing: border-box; }
:where(.tool-app) a { color: inherit; text-decoration: none; }
:where(.tool-app) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.tool-app) svg { display: inline-block; }
.tool-app h1, .tool-app h2, .tool-app h3, .tool-app h4 { text-wrap: balance; letter-spacing: normal; }

.tool-hero-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; }
.tool-hero-links .arrow-link { color: var(--cream); }