/* TronTokenGenerator layout system (2026-09-24).
   One set of layout tokens for every page, loaded after tailwind.min.css.
   Two content widths only: --ttg-container for tools, pricing, the
   homepage and index pages, and --ttg-container-read for guides, legal
   pages and forms. Every page starts --ttg-page-top below the breadcrumb
   bar and ends --ttg-section-space above the footer.

     <div class="ttg-wrap [ttg-wrap--read] ttg-page">   page body
     <section class="ttg-band">                          homepage band
       <div class="ttg-wrap">                                                */
:root {
  --ttg-container: 68rem;            /* 1088px content column */
  --ttg-container-read: 44rem;       /* 704px reading column */
  --ttg-gutter: 1rem;
  --ttg-gutter-sm: 1.5rem;
  --ttg-gutter-lg: 2rem;
  --ttg-page-top: 4rem;
  --ttg-section-space: 4rem;
  --ttg-band-space: 5rem;
  --ttg-band-space-lg: 7rem;
}
.ttg-wrap {
  width: 100%;
  max-width: calc(var(--ttg-container) + 2 * var(--ttg-gutter-lg));
  margin-inline: auto;
  padding-inline: var(--ttg-gutter);
}
.ttg-wrap--read { max-width: calc(var(--ttg-container-read) + 2 * var(--ttg-gutter-lg)); }
@media (min-width: 640px) { .ttg-wrap { padding-inline: var(--ttg-gutter-sm); } }
@media (min-width: 1024px) { .ttg-wrap { padding-inline: var(--ttg-gutter-lg); } }
.ttg-page { padding-top: var(--ttg-page-top); padding-bottom: var(--ttg-section-space); }
.ttg-band { padding-block: var(--ttg-band-space); }
@media (min-width: 1024px) { .ttg-band { padding-block: var(--ttg-band-space-lg); } }
/* A band that ends the page gives the footer the same space as every other
   page, not its larger band padding. */
main > section.ttg-band:last-of-type { padding-bottom: var(--ttg-section-space); }
/* Long single words (the brand name in the about H1) wrap instead of pushing
   the page wider than a phone screen. */
h1, h2 { overflow-wrap: break-word; }
/* Breadcrumb bar is one fixed height, and pages without one reserve it. */
:root { --ttg-crumb-h: 2.625rem; }
.ttg-crumbs { min-height: var(--ttg-crumb-h); box-sizing: border-box; }
.ttg-crumb-spacer { height: var(--ttg-crumb-h); }