/* The six /free-website-for-<trade> pages. Shared Benchlight shell and tokens from style.css. */
.trade-page{overflow-wrap:break-word}
/* No text-wrap:pretty here: WebKit's layout crashes the tab on some of these paragraphs at 200% text. */
/* Phone numbers and street addresses keep their parts together while their box is at least 12em
   wide, measured in its own (possibly enlarged) text. In a narrower box, at 200% text on a phone,
   they keep the reader's text size and break at their spaces instead: a phone number's groups never
   split, and its text stays plain ASCII so it can be copied into the starter. */
.trade-request,.trade-fields dd{container-type:inline-size}
@container (min-width:12em){.trade-page .keep{white-space:nowrap}}
.trade-page .keep .group{white-space:nowrap}
.trade-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,80px);border-bottom:1px solid var(--line)}
/* --fit is the heading's longest word in ems, so a word never splits at large text sizes. */
.trade-intro h1{font-size:min(clamp(2.3rem,4.6vw,4rem),calc((100vw - 2 * var(--gutter)) / var(--fit,6)));line-height:1.05;margin-bottom:1.1rem}
.trade-intro .lead{font-size:1.1875rem;max-width:40ch}
.trade-intro .actions{margin-bottom:12px}
.trade-note{font-size:.9375rem;color:var(--muted);max-width:44ch;margin:0}
.trade-shot{margin:0}
.trade-shot-frame{position:relative;padding-bottom:clamp(28px,4vw,48px);padding-right:clamp(40px,9vw,96px)}
.trade-shot .screen{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 60px -36px #0b2d4b66}
.trade-shot .phone{position:absolute;right:0;bottom:0;width:30%;height:auto;border-radius:18px;border:5px solid var(--night);background:var(--night);box-shadow:0 24px 40px -24px #071f3599}
.trade-shot figcaption{margin-top:18px;font-size:.875rem;line-height:1.55;color:var(--muted);max-width:52ch}
.trade-section{padding-block:clamp(40px,5.5vw,72px);border-bottom:1px solid var(--line)}
.trade-section>h2{font-size:min(clamp(1.85rem,3.2vw,2.6rem),calc((100vw - 2 * var(--gutter)) / var(--fit,6)));max-width:24ch}
.trade-section>p{max-width:62ch}
.trade-checklist{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19em),1fr));gap:26px 48px}
.trade-checklist li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 14px;align-items:start}
.trade-checklist svg{width:28px;height:28px;margin-top:1px;color:var(--accent)}
.trade-checklist h3{font-size:1.1875rem;margin:0 0 4px;letter-spacing:-.015em}
.trade-checklist p{margin:0;color:var(--text)}
.trade-ask{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20em),1fr));gap:clamp(28px,4vw,56px);margin-top:28px}
.trade-ask h3{font-size:1.25rem;margin-bottom:12px}
.trade-request{margin:0;padding:24px 26px;background:var(--night);color:#f4efe6;border-radius:18px;font-size:1.0625rem;line-height:1.6}
.trade-request p{margin:0;max-width:none}
.trade-request-label{display:block;margin-bottom:10px;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--glow)}
.trade-ask .small{margin-top:14px}
.trade-fields{margin:0;padding:22px 24px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.trade-fields div{padding-block:10px;border-bottom:1px solid var(--line)}
.trade-fields div:first-child{padding-top:0}
.trade-fields div:last-child{border-bottom:0;padding-bottom:0}
.trade-fields dt{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.trade-fields dd{margin:0}
.trade-fields ul{margin:0;padding:0;list-style:none}
.trade-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14em),1fr));gap:28px 40px;counter-reset:step}
.trade-steps li{counter-increment:step;padding-top:18px;border-top:2px solid var(--ink)}
.trade-steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--display);font-weight:700;color:var(--accent);margin-bottom:6px}
.trade-steps h3{font-size:1.25rem}
.trade-steps p{margin:0}
.trade-limits{margin-top:28px;padding:24px 26px;background:var(--wash);border-radius:18px}
.trade-limits h3{font-size:1.1875rem}
.trade-limits p{margin:0;max-width:70ch}
.trade-closer{padding-block:clamp(44px,6vw,80px)}
.trade-closer h2{font-size:min(clamp(1.9rem,3.4vw,2.8rem),calc((100vw - 2 * var(--gutter)) / var(--fit,6)))}
.trade-others{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.trade-others h3{font-size:1.0625rem;margin-bottom:6px}
.trade-others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 28px}
.trade-others a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:900px){
 .trade-intro{grid-template-columns:1fr}
 .trade-intro .lead{max-width:none}
 .trade-shot{max-width:640px}
}
@media(max-width:760px){
 .trade-request,.trade-fields,.trade-limits{padding:20px}
 .trade-shot .phone{border-width:4px;border-radius:14px}
 .trade-page .footer-bottom{align-items:flex-start;gap:18px}
 .trade-page .footer-bottom nav{flex-wrap:wrap}
}
@media(max-width:360px){
 .trade-request,.trade-fields,.trade-limits{padding:16px 14px}
}