/* compare/jira-and-linear.html's styles. Made by publish-site.py from the Design Lab draft compare-jira-and-linear.html; don't edit it by hand. */
.hero{padding-block:72px 56px;max-width:60em}
.hero h1{font:600 clamp(38px,4.2vw,64px)/1.06 var(--font-display);letter-spacing:-.025em;margin-top:18px}
.hero .lede{font-size:clamp(18px,1.45vw,22px);line-height:1.55;color:var(--text-secondary);margin-top:24px}
.hero .cta-row{margin-top:32px}

.section{padding-block:88px}
.section-head{max-width:52em}
.section-head h2{font:600 clamp(30px,3.2vw,48px)/1.1 var(--font-ui);letter-spacing:-.02em}
.section-head p{margin-top:14px;color:var(--text-secondary);font-size:18px}
.band{background:var(--surface-sunken);border-block:1px solid var(--border-default)}
.body{max-width:52em;margin-top:18px;color:var(--text-secondary);font-size:17px}

.compare{width:100%;margin-top:40px;border-collapse:separate;border-spacing:0;background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;font-size:15px}
.compare th,.compare td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-subtle)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare thead th{background:var(--surface-sunken);font:600 12px/16px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.compare tbody th{font:600 15px/22px var(--font-ui);width:18%}
.compare td{color:var(--text-secondary);width:27%}
.compare td.blom{color:var(--text-primary);background:var(--surface-page)}

.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.points li{border:1px solid var(--border-default);border-left:4px solid var(--text-brand);border-radius:var(--radius-md);padding:18px 20px;background:var(--surface-raised)}
.points h3{font:600 16.5px/24px var(--font-ui)}
.points p{margin-top:6px;color:var(--text-secondary);font-size:15px}

.sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.sources h3{font:600 16.5px/24px var(--font-ui)}
.sources ul{margin-top:10px;display:grid;gap:8px}
.sources li{font-size:15px;color:var(--text-secondary)}

.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.related a{display:block;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:18px 20px;background:var(--surface-raised);color:inherit;text-decoration:none}
.related a:hover{border-color:var(--text-brand)}
.related b{display:block;font:600 16.5px/24px var(--font-ui);color:var(--text-brand)}
.related span{display:block;margin-top:6px;color:var(--text-secondary);font-size:15px}

.closing{background:var(--surface-page);border-top:1px solid var(--border-default)}
.closing .wrap{padding-block:80px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.closing h2{font:600 clamp(32px,3.4vw,52px)/1.1 var(--font-display);letter-spacing:-.02em}
.closing p{margin-top:12px;color:var(--text-secondary);font-size:17px;max-width:40em}

@media (max-width:960px){
  .hero{padding-block:48px 40px}
  .related{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .compare,.compare thead,.compare tbody,.compare tr,.compare tbody th,.compare td{display:block;width:auto}
  .compare thead{display:none}
  .compare tbody tr{border-bottom:1px solid var(--border-default)}
  .compare tbody tr:last-child{border-bottom:0}
  .compare tbody th{padding-bottom:4px;border-bottom:0}
  .compare td{padding-block:8px;border-bottom:0}
  .compare td::before{content:attr(data-label);display:block;font:600 12px/16px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
  .compare td:last-child{padding-bottom:16px}
}
@media (max-width:640px){
  .section{padding-block:64px}
  .points,.sources{grid-template-columns:minmax(0,1fr)}
  .compare th,.compare td{padding-inline:16px}
}