.hero{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:110px}
.hero .lede{margin:24px 0 30px}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-note{font-size:14px;color:var(--mute)}
.hero-scan{min-width:0}
.search{margin-top:20px}
.search label{font-size:14px;color:var(--mute);display:block;margin-bottom:10px}
.field{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:14px;padding:0 16px;height:56px;transition:box-shadow .15s,background .15s}
.field:focus-within{background:#fff;box-shadow:0 0 0 2px var(--blue)}
.field svg{width:20px;height:20px;color:var(--mute);flex:none}
.field input{flex:1;border:0;background:none;font-size:18px;outline:none;min-width:0;-webkit-appearance:none;appearance:none}
.field input::-webkit-search-cancel-button{display:none}
.field .count{font-size:14px;color:var(--mute);white-space:nowrap}
.chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.chips button{background:#fff;border:1px solid #DDE1E8;border-radius:999px;padding:7px 14px;font-size:14px;transition:border-color .15s,color .15s}
.chips button:hover{border-color:var(--blue);color:var(--blue)}

/* photo of a sheet on a table, then flattened */
.photo{position:relative;height:640px;border-radius:var(--r-lg);overflow:hidden;perspective:1400px;
  background:#CFC6B8 radial-gradient(90% 70% at 25% 15%,rgba(255,255,255,.45),transparent 60%);transition:background-color 1s}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;transition:opacity 1s;
  background:repeating-linear-gradient(98deg,rgba(80,55,30,.06) 0 2px,transparent 2px 9px)}
.photo.flat{background-color:var(--soft);background-image:none}
.photo.flat::after{opacity:0}
.sheet-scan{position:absolute;left:50%;top:50%;width:400px;height:560px;margin:-280px 0 0 -200px;background:#fff;border-radius:3px;padding:36px 34px;
  font-family:var(--serif);font-size:11.8px;line-height:1.66;color:var(--paperink);
  transform:rotateX(26deg) rotateZ(-8deg) translateY(16px) scale(.9);filter:brightness(.96) sepia(.08);
  box-shadow:0 30px 50px -18px rgba(60,40,20,.55);transition:transform 1.1s cubic-bezier(.65,0,.35,1),box-shadow 1s,filter 1s}
.photo.flat .sheet-scan{transform:none;filter:none;box-shadow:var(--shadow)}
.sheet-scan .dh{font-size:15px;text-align:center;font-weight:600;margin-bottom:2px}
.sheet-scan .c{text-align:center;color:#6B7280;margin-bottom:14px}
.sheet-scan p{margin-bottom:8px;text-align:justify;hyphens:auto}
.sheet-scan mark{background:var(--mark);color:inherit;border-radius:2px;box-shadow:0 0 0 2px var(--mark)}
.scan-sign{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;align-items:end;margin-top:22px;color:#6B7280}
.hand{font-family:"Caveat",cursive;font-size:24px;color:var(--sigink);line-height:1;border-bottom:1px solid #9CA3AF;padding:0 6px 2px}
.corners{position:absolute;inset:0;pointer-events:none}
.corners i{position:absolute;width:34px;height:34px;border:4px solid var(--blue);transition:left 1.1s cubic-bezier(.65,0,.35,1),top 1.1s cubic-bezier(.65,0,.35,1),opacity .4s}
.corners i:nth-child(1){border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.corners i:nth-child(2){border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.corners i:nth-child(3){border-right:0;border-top:0;border-radius:0 0 0 10px}
.corners i:nth-child(4){border-left:0;border-top:0;border-radius:0 0 10px 0}
.photo.done .corners i{opacity:0}
.status{position:absolute;left:20px;bottom:20px;background:rgba(10,15,28,.82);color:#fff;font-size:14px;padding:9px 14px;border-radius:999px;backdrop-filter:blur(8px);transition:opacity .4s}
.replay{position:absolute;right:20px;bottom:20px;background:#fff;border-radius:999px;padding:9px 14px;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.12)}

/* pains */
.pains{padding-bottom:120px}
.pains-head{display:grid;grid-template-columns:1fr 1fr;gap:16px 64px;align-items:end;margin-bottom:36px}
.pain-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pain-list a{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:space-between;gap:24px;padding:24px 24px 0;border-radius:var(--r-md);background:#fff;text-decoration:none;overflow:hidden;
  border:1px solid var(--line);transition:border-color .2s,transform .2s}
.pain-list a:hover{border-color:var(--blue);transform:translateY(-3px)}
.pain-list q{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink2);quotes:"«" "»"}
.pain-list .fix{align-self:end;height:100%;margin:0 -24px;padding:16px 24px 22px;background:var(--blue-t);border-top:1px dashed rgba(0,87,255,.35);transition:background .2s,color .2s}
.pain-list .fix small{display:block;font-size:13px;color:var(--blue);font-weight:500}
.pain-list .fix b{display:block;font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin:4px 0 6px;color:var(--ink);white-space:nowrap}
.pain-list .fix span{display:block;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.pain-list a:hover .fix{background:var(--blue)}
.pain-list a:hover .fix small,.pain-list a:hover .fix b,.pain-list a:hover .fix span{color:#fff}

@media (max-width:1000px){.pain-list{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:36px;padding-top:24px;padding-bottom:72px}
  .photo{height:520px;border-radius:22px}
  .sheet-scan{scale:.78}
  .pains{padding-bottom:80px}
  .pains-head{grid-template-columns:1fr;margin-bottom:24px}
}
@media (max-width:560px){
  .photo{height:440px}.sheet-scan{scale:.66}
  .pain-list{grid-template-columns:1fr}.pain-list a{gap:16px}
  .replay{top:16px;bottom:auto;right:16px}
}