/* /free uses the landing hero, with a purple block and the white logo as its image, then a rail of headings and text. */
.marketing .free-page { padding-bottom: 160px; color: var(--ink); }
.marketing .free-page .hero h1 { margin: 0 0 24px; color: var(--ink); font-size: clamp(48px, 4.6vw, 66px); line-height: 1.04; text-wrap: balance; }
.marketing .free-page .hero .lede { max-width: 30em; font-size: 19px; text-wrap: pretty; }
.marketing .free-page .free-page-logo { display: flex; align-items: center; justify-content: center; gap: .32em; height: clamp(460px, 38vw, 580px); background: var(--purple); color: var(--canvas); font-size: 60px; }
.marketing .free-page .free-page-logo img { width: 1.3em; height: auto; }
.marketing .free-page-wordmark { display: block; height: 1em; aspect-ratio: 212 / 53.7; background: currentColor; -webkit-mask: url(/images/logos/wordmark.svg) center / contain no-repeat; mask: url(/images/logos/wordmark.svg) center / contain no-repeat; }

/* Rail columns match the hero split, so headings sit under the headline and text under the logo. */
.marketing .free-page-body { padding-top: 128px; }
.marketing .free-page-row { display: grid; grid-template-columns: 1fr 1.04fr; column-gap: clamp(48px, 6.2vw, 100px); }
.marketing .free-page-row + .free-page-row { margin-top: 128px; }
.marketing .free-page-row h2 { position: sticky; top: 112px; align-self: start; max-width: 12em; margin: 0; font: 400 38px/1.1 var(--serif); letter-spacing: -.035em; text-wrap: balance; scroll-margin-top: 112px; }
.marketing .free-page-row h2 .free-page-h2-sub { display: block; margin-top: .3em; color: var(--muted); }
.marketing .free-page-text { max-width: 34em; }
.marketing .free-page-text p { margin: 0 0 20px; font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.marketing .free-page-text p:last-child { margin-bottom: 0; }
.marketing .free-page-text .free-page-key { font: 400 23px/1.45 var(--serif); letter-spacing: -.015em; }
.marketing .free-page-link { color: var(--purple); font-weight: 500; }

/* The coin line under the hero points visitors from the editor's share promo to the credits offer. */
.marketing .free-page .hero .free-page-offer { margin: 28px 0 0; font: 400 17px/1.4 var(--sans); }
.marketing .free-page-offer a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.marketing .free-page-offer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.marketing .free-page :is(.free-page-offer, .free-page-share) img { flex: none; width: 20px; height: 20px; margin: 0; }
.marketing .free-page .free-page-share { gap: 10px; }

.marketing .free-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.marketing .free-page :is(.free-page-primary, .free-page-secondary) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 28px; border-radius: 5px; font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s; }
.marketing .free-page-primary { border: 1px solid var(--purple); background: var(--purple); color: #fff; }
.marketing .free-page-primary:hover { border-color: var(--action-hover); background: var(--action-hover); }
.marketing .free-page-secondary { border: 1px solid rgb(48 42 49 / 22%); background: transparent; color: var(--ink); }
.marketing .free-page-secondary:hover { border-color: var(--ink); }
.marketing .free-page :is(.free-page-primary, .free-page-secondary):focus-visible { outline: 2px solid var(--muted); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html:has(.free-page) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .marketing .free-page :is(.free-page-primary, .free-page-secondary) { transition: none; } }

@media (max-width: 760px) {
  .marketing .free-page { padding-bottom: 96px; }
  .marketing .free-page .hero h1 { margin-bottom: 16px; font-size: 42px; line-height: 1.06; }
  .marketing .free-page .hero .lede { font-size: 17px; }
  .marketing .free-page .hero-media { display: none; }
  .marketing .free-page-body { padding-top: 72px; }
  .marketing .free-page-row { grid-template-columns: 1fr; row-gap: 20px; }
  .marketing .free-page-row + .free-page-row { margin-top: 80px; }
  .marketing .free-page-row h2 { position: static; font-size: 30px; }
  .marketing .free-page-text p { font-size: 16px; }
  .marketing .free-page-text .free-page-key { font-size: 20px; }
  .marketing .free-page-actions > * { flex: 1 1 100%; }
}