/* Additions for the intro, free sampler and coming-soon tiles. Loaded after site.css. */
.hero .row{margin-top:2px}
.intro .two{align-items:center}
.intro h2{margin-bottom:12px}
.intro p+p{margin-top:10px}
.tile.static .cover{display:flex;flex-direction:column;justify-content:space-between;padding:18px;text-decoration:none;color:var(--paper);background:var(--ink)}
.tile.static .cover .k{color:#C9C5BC}
.tile.static .cover .t{font-family:var(--sans);font-stretch:70%;font-weight:900;font-size:clamp(30px,5vw,42px);line-height:.96}
.tile.static .cover .sq{display:block;margin-bottom:10px}
.tile.static .cover:hover{color:var(--paper);background:#25272C}
.tile.soon .cover{background:var(--tint);border:1.5px dashed #9A968C;color:var(--ink);cursor:default}
.tile.soon .cover .k{color:#55585F}
.tile.soon .cover:hover{background:var(--tint);color:var(--ink)}
.tile.soon h3{color:var(--mute)}
.ribbon.free{border-color:var(--ink);color:var(--ink)}
.ribbon.later{border-color:#8A8D93;color:#55585F}
/* sampler page */
.doc{max-width:760px}
.doc h1{font-size:clamp(34px,5.4vw,60px);margin:6px 0 14px}
.doc h2{font-size:clamp(24px,3.4vw,32px);margin:44px 0 10px;padding-top:14px;border-top:2px solid var(--ink)}
.doc h3{margin:18px 0 6px}
.doc p{margin-bottom:12px}
.doc ul{margin:0 0 12px;padding-left:20px}
.doc li{margin-bottom:6px}
.doc .lead{margin:14px 0 22px}
.tbl{overflow-x:auto;margin:10px 0 10px}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.tbl th{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;border-bottom:2px solid var(--ink);padding:0 10px 8px 0}
.tbl td{border-bottom:1px solid var(--rule);padding:9px 10px 9px 0;vertical-align:top}
.tbl td b{font-family:var(--sans);font-weight:800}
.src{font-size:13.5px;line-height:1.5;color:#3B3E44}
.callout{border:2px solid var(--ink);padding:16px 18px;margin:18px 0}
.callout.red{border-color:var(--red)}
.callout h3{margin-top:2px}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:12px 0 4px}
.picks div{border-top:3px solid var(--ink);padding-top:8px}
.picks p{font-size:15px;margin:0}
.fourgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px 24px;margin:16px 0}
.fourgrid>div{border-top:3px solid var(--ink);padding-top:8px}
.fourgrid>div.w{border-top-color:var(--red)}
.fourgrid ul{font-size:15.5px}
.bigp{font-family:var(--sans);font-stretch:62%;font-weight:900;font-size:34px;line-height:1;margin:2px 0 6px}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;padding:2px 8px;border:1.5px solid var(--ink)}
.tag.red{border-color:var(--red);color:#A82A16}
.chkhead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.checklist{list-style:none;padding:0;margin:8px 0 14px}
.checklist li{position:relative;padding:9px 0 9px 34px;border-bottom:1px solid var(--rule);margin:0;font-size:16px}
.checklist li::before{content:"";position:absolute;left:4px;top:13px;width:15px;height:15px;border:1.75px solid var(--ink)}
.checklist small{display:block;font-size:13.5px;color:var(--mute);line-height:1.4;margin-top:2px}
.grp{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 10px;margin-top:16px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0}
@media (max-width:760px){
  .doc h2{margin-top:34px}
}
@media print{
  .top,.foot,.cta-row .btn,.crumb{display:none}
  body{background:#fff}
}

/* hero fan */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.fan{position:relative;width:100%;padding-bottom:92%}
.fan figure{position:absolute;margin:0;width:54%;line-height:0;background:#fff;border:1px solid #CFCBC2;box-shadow:0 14px 34px rgba(22,23,26,.18)}
.fan img{width:100%;height:auto;display:block}
.fan .f3{left:0;top:10%;transform:rotate(-5deg);z-index:3}
.fan .f2{left:20%;top:4%;transform:rotate(2deg);z-index:2}
.fan .f1{left:39%;top:0;transform:rotate(6deg);z-index:1}
.proof{margin:18px 0 0;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#4A4D54}
.proof b{color:#C8361F;font-weight:600}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:28px}.fan{max-width:420px;margin:0 auto}}