@import url('./funnels.css');

/* The free tools page (/free-audio-tools.html): every funnel page in groups, each group
   a funnels.css .tool-links list under its own heading, then the MP3 encoder's notice.
   funnels.css has no rules for groups or the notice, so they live here. */

/* The hero's jump links, one for each group, under the lede and lined up with it in the
   funnel hero's box (funnel-hero.css). */
.hub-jump { justify-content:flex-start; margin-top:0; }

/* A group: its heading, then its tools. The floating bar would cover a group's heading
   after a jump link, so the jump stops a little above it. */
.hub-group { scroll-margin-top:96px; }
.hub-group + .hub-group { margin-top:56px; }
.hub-group h3 { margin:0 0 6px; font-size:24px; line-height:1.2; font-weight:650; letter-spacing:-.015em; }

/* The licence notice: plain words, then its four links, each a full 44 pixel target. */
.hub-notice { max-width:46em; margin-top:72px; padding-top:28px; border-top:1px solid var(--hair); }
.hub-notice h3 { margin:0 0 10px; font-size:19px; font-weight:650; letter-spacing:-.01em; }
.hub-notice p { margin:0; color:var(--coal-2); font-size:16px; line-height:1.55; text-wrap:pretty; }
.hub-notice ul { display:flex; flex-wrap:wrap; gap:0 24px; margin:8px 0 0; padding:0; list-style:none; }
.hub-notice a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; color:var(--coal); font-size:15px; font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.hub-notice a:hover { text-decoration-thickness:2px; }

/* The close ends on its invitation: this page has no cat, so no ledge for one. The phone
   size comes again below, since this rule would otherwise beat landing.css's phone rule. */
.closing { padding-bottom:150px; }

@media (max-width:700px) {
  .hub-group + .hub-group { margin-top:44px; }
  .hub-group h3 { font-size:22px; }
  .hub-notice { margin-top:56px; }
  .closing { padding-bottom:110px; }
}