/* first screen: headline, one sentence, two actions, one line of numbers, the coverage check, and the proof
   visual: a real printed page with a card of the rows read from it, overlapping its edge */
.hero {
  position: relative; min-height: 100svh;
  padding: calc(var(--top) + clamp(20px, 4vh, 52px)) var(--gutter) clamp(28px, 5vh, 56px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 4.5vw, 84px); align-items: center;
}
.hero h1 { position: relative; margin: 0; font-size: var(--s-hero); color: var(--ink); max-width: 10.4em; }
/* a quick wave of blue through the headline's dots: an accent over a headline that is already there */
.hero h1 .wave { position: absolute; inset: 0; color: var(--blue); pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 0 41%, #000 47% 53%, transparent 59% 100%); mask-image: linear-gradient(100deg, transparent 0 41%, #000 47% 53%, transparent 59% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; animation: h1-wave 1.15s var(--ease-stitch) .1s both; }
@keyframes h1-wave { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.hero .lede { margin: var(--sp-block) 0 0; font-size: var(--s-lead); color: var(--ink-2); line-height: 1.5; max-width: 31rem; }
.hero .actions { margin-top: var(--sp-block); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero .for { margin: 12px 0 0; font-size: var(--s-small); color: var(--ink-3); line-height: 1.5; max-width: 31rem; }
.hero .facts { margin: clamp(26px, 4.5vh, 48px) 0 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(18px, 2.2vw, 36px); }
.hero .facts div { display: flex; flex-direction: column-reverse; }
.hero .facts dt { font-size: var(--s-small); color: var(--ink-2); margin-top: 4px; white-space: nowrap; }
.hero .facts dd { margin: 0; font-family: var(--text); font-weight: 600; font-feature-settings: "kern" 1, "tnum" 1; letter-spacing: -0.025em;
  font-size: clamp(1.5rem, 2vw, 2.05rem); line-height: 1.3; color: var(--blue); white-space: nowrap; -webkit-text-stroke: 0; }

/* "Is your market covered?" */
.check { position: relative; margin-top: clamp(22px, 3.6vh, 36px); max-width: 30rem; }
.check .check-list.up { bottom: 46px; }
.check-q { display: block; font-size: var(--s-small); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.check-box { position: relative; }
.check-box::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: radial-gradient(circle, var(--blue) 0 1.6px, transparent 1.8px) 0 0 / 7px 7px; opacity: .9; pointer-events: none; }
.check input { width: 100%; height: 46px; border: 1px solid var(--grey-2); background: var(--paper); padding: 0 14px 0 38px; font-size: 1rem; color: var(--ink); border-radius: 0; }
.check input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-3); }
.check input::placeholder { color: var(--ink-3); }
.check-list { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--paper);
  border: 1px solid var(--grey-2); border-top: 0; box-shadow: 0 18px 40px rgba(12, 13, 18, .12); }
.check-list.up { top: auto; bottom: 46px; border-top: 1px solid var(--grey-2); border-bottom: 0; box-shadow: 0 -18px 40px rgba(12, 13, 18, .12); }
.check-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 14px; cursor: pointer; border-top: 1px solid var(--grey-1); }
.check-list li:first-child { border-top: 0; }
.check-list li[aria-selected="true"], .check-list li:hover { background: var(--blue-3); }
.check-list .ck-name { font-size: .95rem; color: var(--ink); font-weight: 500; line-height: 1.3; }
.check-list .ck-hud { grid-column: 1 / -1; font-size: var(--s-small); color: var(--ink-3); line-height: 1.35; overflow-wrap: anywhere; }
.check-list .ck-ans { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; font-size: var(--s-small); color: var(--ink-2); line-height: 1.35; }
.check-list .ck-ans b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.check-list .ck-ans .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; background: var(--grey-2); }
.check-list .in .ck-ans .dot { background: var(--blue); }
.check-list .in .ck-ans b { color: var(--blue); }
.check-list .ck-go { grid-row: 1; grid-column: 2; align-self: center; font-size: var(--s-small); color: var(--blue); white-space: nowrap; }
.check-list .ck-none { cursor: default; color: var(--ink-3); font-size: var(--s-small); }

/* the proof: a real printed page, and a card of the rows read from it overlapping the page's right edge */
.proof { position: relative; margin: 0; }
.proof .page { position: relative; width: 74%; height: clamp(320px, 58vh, 580px); overflow: hidden; background: var(--paper); cursor: crosshair; outline-offset: 4px; }
.proof .sheet { position: absolute; left: 0; top: 0; width: calc(100% / var(--right, .78)); transform: translateY(var(--ty, -30%)); transition: transform 1.1s var(--ease), width 1.1s var(--ease), opacity .45s var(--ease); will-change: transform; }
.proof .sheet.now { transition: none; }
.proof .sheet img { display: block; width: 100%; height: auto; max-width: none; }
.proof .sheet.fade { opacity: 0; }
.proof .page-cap { width: 74%; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.proof .page-cap .where b { color: var(--ink); font-weight: 500; }
.proof .page-cap a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.proof .page-cap a:hover { color: var(--blue); }
.proof .page-cap a svg { width: .75em; height: .75em; fill: currentColor; }

.proof .rows { list-style: none; margin: 0; padding: 6px 20px; position: absolute; right: 0; top: 0; width: 46%; z-index: 4;
  background: var(--paper); box-shadow: 0 0 0 1px rgba(12, 13, 18, .06), 0 22px 60px rgba(12, 13, 18, .14); transition: top .9s var(--ease), opacity .35s var(--ease); }
.proof .rows.fade { opacity: 0; }
/* every row is there from the start; a row's knot fills in when the stitch from its printed amount arrives */
.proof .rows li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 0 14px; padding: 12px 0; border-top: 1px solid var(--grey-1);
  transition: opacity .35s var(--ease), background .25s var(--ease); }
.proof .rows li[hidden] { display: none; }
.proof .rows li:first-child { border-top: 0; }
.proof .rows li.lit { background: var(--blue-3); box-shadow: -20px 0 0 var(--blue-3), 20px 0 0 var(--blue-3); }
.proof.picking .rows li:not(.lit) { opacity: .18; }
.proof .rows li .knot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--blue); background: transparent; display: grid; place-items: center; transition: background .25s var(--ease); }
.proof .rows li.on .knot { background: var(--blue); }
.proof .rows li .knot b { color: var(--blue); }
.proof .rows li.on .knot b { color: #fff; }
.proof .rows li .knot b { font: 600 9.5px/1 var(--text); display: none; }
.proof .rows li .what { display: grid; line-height: 1.3; min-width: 0; }
.proof .rows li .what .u { color: var(--ink); }
.proof .rows li .what .m { color: var(--ink-3); font-size: var(--s-small); }
.proof .rows li .m a { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: .25em; }
.proof .rows li .m a:hover { color: var(--blue); }
.proof .rows li .m a svg { width: .7em; height: .7em; fill: currentColor; }
.proof .rows li .amt { font-family: var(--text); font-weight: 600; font-feature-settings: "kern" 1, "tnum" 1; letter-spacing: -0.02em; color: var(--blue); font-size: 1.3rem; line-height: 1; align-self: center; }
.proof .stitch-layer { z-index: 3; }
.proof .stitch-layer text.badge { font: 600 9.5px var(--text); fill: #fff; text-anchor: middle; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 0; align-items: start; min-height: auto; padding-top: calc(var(--top) + 22px); padding-bottom: 44px; }
  .hero .pitch { display: contents; }
  .hero h1 { order: 1; font-size: clamp(2.5rem, 10.4vw, 2.9rem); word-spacing: -0.1em; }
  .hero .lede { order: 2; margin-top: 12px; font-size: .98rem; }
  .hero .proof { order: 3; margin-top: 20px; }
  .hero .actions { order: 4; margin-top: 22px; gap: 20px; }
  .hero .for { order: 2; margin-top: 8px; }
  .hero .facts { order: 5; grid-template-columns: repeat(2, auto); gap: 10px 28px; margin-top: 22px; }
  .hero .facts div:first-child { grid-column: 1 / -1; }
  .hero .facts dd { font-size: 1.4rem; }
  .hero .check { order: 6; margin-top: 22px; }
  .proof { display: flex; flex-direction: column; }
  .proof .page { order: 1; width: 100%; height: 200px; }
  .proof .rows { order: 2; }
  .proof .page-cap { order: 3; width: 100%; margin-top: 12px; font-size: .8rem; }
  .proof .rows { position: relative; width: auto; top: auto !important; margin: -26px 10px 0; padding: 4px 14px; }
  .proof .rows li { grid-template-columns: 18px minmax(0, 1fr) auto; padding: 10px 0; }
  .proof .rows li .knot { width: 18px; height: 18px; }
  .proof .rows li .knot b { display: block; }
  .proof .rows li .amt { font-size: 1.15rem; }
  .proof .rows li:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero h1 .wave { display: none; } }

.hero .dict { margin: 14px 0 0; font-size: var(--cap-size); }
.hero .dict a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--grey-2); text-underline-offset: .25em; }
.hero .dict a:hover { color: var(--blue); text-decoration-color: var(--blue); }
@media (max-width: 860px) { .hero .dict { order: 4; margin-top: 12px; } .hero .facts { order: 5; } }