/* Shared by every page: tokens, type, the index grid, buttons, the nav and the footer.
   Tokens match the Paper file "FirstIndex — brand". Page-only styles stay in each page's <style>. */
@font-face{font-family:"Martina Plantijn";src:url(/fonts/martina.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{--white:#fff;--ink:#111;--graphite:#555;--blue:#00e;--highlight:#fff200;--line:rgb(17 17 17/.1);--display:"Martina Plantijn",Georgia,serif;--text:Geist,system-ui,sans-serif;
  /* The index grid: 2×2 dots every 16px. Cells SVGs sit at calc(50% - 720px), so the tile starts 8px left of center. */
  --dots-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%230000EE' fill-opacity='.15'/%3E%3C/svg%3E");
  --dots-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23FFFFFF' fill-opacity='.14'/%3E%3C/svg%3E");
  --dots-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23FFFFFF' fill-opacity='.18'/%3E%3C/svg%3E")}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;scroll-behavior:smooth;background:var(--white)}
body{background:var(--white);color:var(--ink);font:400 16px/24px var(--text)}
a{color:inherit;text-decoration:none}
a,button,summary,label[for]{cursor:url(/cursor.svg) 10 1,pointer}
button{font:inherit;color:inherit;background:none;border:0}
/* Selection is a highlighter: yellow, nearly the complement of link blue, so it shows on white, blue and ink. */
::selection{background:var(--highlight);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.on-ink :focus-visible,.on-blue :focus-visible{outline-color:var(--white)}
.band{position:relative;overflow:clip;background-position:calc(50% - 8px) 0}
.on-white{background-image:var(--dots-white)}
.on-ink{background-color:var(--ink);background-image:var(--dots-ink);color:var(--white)}
.on-blue{background-color:var(--blue);background-image:var(--dots-blue);color:var(--white)}
.cells{position:absolute;top:0;left:calc(50% - 720px);width:1440px;pointer-events:none;display:none}
.cells svg{display:block}
.wrap{position:relative;max-width:1440px;margin:0 auto;padding:0 16px}
.graphite{color:var(--graphite)}
.cell{display:inline-block;flex-shrink:0;width:14px;height:14px;background:var(--blue)}
.link{text-decoration:underline 1px;text-underline-offset:3px}
.blue{color:var(--blue)}
.h2{font:500 44px/46px var(--display);letter-spacing:-.02em}
.lead{font-size:18px;line-height:28px;color:var(--graphite)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Button: square, 54px, Geist 600 18px, arrow in a cell. */
.btn{display:inline-flex;align-items:center;gap:20px;height:54px;padding:0 14px 0 22px;font:600 18px/22px var(--text);background:var(--blue);color:var(--white);border:0;flex-shrink:0}
.btn i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--white);color:var(--blue)}
.btn svg{transition:transform .2s}.btn:hover svg{transform:translateX(2px)}
.btn:active,.start:active{transform:translateY(2px)}
.btn.white{background:var(--white);color:var(--blue)}.btn.white i{background:var(--blue);color:var(--white)}

/* Text Josh: photo, the reader's question, the number as the only link. No card. */
.josh{display:flex;align-items:center;gap:16px}
.josh img{width:64px;height:64px;flex-shrink:0}
.josh p:first-child{font-size:15px;line-height:20px;color:var(--graphite)}
.josh p:last-child{display:flex;flex-wrap:wrap;column-gap:6px;font-size:16px;line-height:22px}
.josh b{font-weight:500}.josh a{font-weight:600;color:var(--blue);padding:11px 0;margin:-11px 0}
.on-blue .josh p:first-child{color:rgb(255 255 255/.8)}.on-blue .josh a{color:var(--white)}

/* Nav */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:8px;color:var(--blue);min-height:44px}
.logo>i>svg:first-child{width:20px;height:22px}
.logo span{font:500 24px/28px var(--display);letter-spacing:-.015em;text-decoration:underline 2px;text-underline-offset:5px}
.nav nav{display:flex;align-items:center;gap:36px;font-weight:500}
.nav .links{display:contents}
.nav .links a:not(.start)[aria-current]{color:var(--blue)}
.start{display:flex;align-items:center;height:44px;padding:0 16px;color:var(--white);font-weight:600}
/* Phone: a Menu button opens the links in a panel under the nav. */
.menu{display:flex;align-items:center;height:44px;padding:0 4px;font-weight:500}
.menu::after{content:"";width:10px;height:10px;margin-left:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.nav.open .menu::after{transform:translateY(2px) rotate(-135deg)}
@media (max-width:767px){
  .nav .links{display:none;position:absolute;top:100%;left:-16px;right:-16px;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px;background:var(--white);border-bottom:2px solid var(--ink)}
  .nav.open .links{display:flex}
  .nav .links a:not(.start){display:flex;align-items:center;min-height:52px;font-size:20px;border-bottom:1px solid var(--line)}
  .nav .links .start{justify-content:center;height:56px;margin-top:20px;font-size:18px}
}
/* Logo hover: the hand double-clicks, in hard pixel steps, with a click burst on each tap. */
.logo>i{position:relative;display:flex}
.logo .burst{position:absolute;top:-16px;left:calc(41% - 13.5px);width:27px;height:12px;opacity:0}
.hand.tap{animation:logo-click .7s step-end}
@keyframes logo-click{15%,45%{transform:translateY(3px)}30%,60%{transform:none}}
@keyframes logo-burst{15%,45%{opacity:1}30%,60%{opacity:0}}
.logo:hover>i>svg:first-child,.logo:focus-visible>i>svg:first-child{animation:logo-click .7s step-end}
.logo:hover .burst,.logo:focus-visible .burst{animation:logo-burst .7s step-end}
/* Nav hover: the underline swipes in from the left and leaves to the right. */
@media (min-width:768px){
  .nav .links a:not(.start){background:linear-gradient(currentColor,currentColor) right bottom/0 1px no-repeat;padding-bottom:2px;transition:color .2s,background-size .25s ease-out}
  .nav .links a:not(.start):hover,.nav .links a:not(.start):focus-visible{color:var(--blue);background-position:left bottom;background-size:100% 1px}
}
/* "Get started" in the nav: ink swipes in over the blue from the left and leaves to the right. */
.start{background:linear-gradient(var(--ink),var(--ink)) right/0 100% no-repeat var(--blue);transition:background-size .25s ease-out}
.start:hover,.start:focus-visible{background-position:left;background-size:100% 100%}

/* Two ways to work with us: a switch, so it's plain this page is one of two options. */
.switch{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:8px}
.switch p{font-size:14px;line-height:20px;font-weight:500;color:var(--graphite)}
.ways{display:inline-flex;padding:4px;border:1px solid rgb(17 17 17/.2);background:var(--white)}
.ways a{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.ways a i{width:14px;height:14px;flex-shrink:0;border:2px solid currentColor;transition:box-shadow .2s}
.ways a span{color:var(--graphite);font-weight:400}
.ways a:not([aria-current]){color:var(--blue)}
.ways a:not([aria-current]):hover{background:rgb(0 0 238/.06)}
.ways a:not([aria-current]):hover i{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 8px currentColor}
.ways a[aria-current]{background:var(--blue);color:var(--white)}
.ways a[aria-current] i{box-shadow:inset 0 0 0 2px var(--blue),inset 0 0 0 8px var(--white)}
.ways a[aria-current] span{color:rgb(255 255 255/.8)}
@media (max-width:480px){.ways{display:flex;width:100%}.ways a{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;height:60px;padding:0 12px}.ways a i{display:none}.ways a span{font-size:14px;line-height:18px}}

/* Footer (ink): the closing ask, every page we have, then the wordmark. */
.sfoot .wrap{display:flex;flex-direction:column;gap:56px;padding-top:64px;padding-bottom:48px}
.sfoot .ask{display:flex;flex-direction:column;gap:32px}
.sfoot .ask h2{font:400 30px/36px var(--display);letter-spacing:-.02em}
.sfoot .go{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sfoot .go p{display:flex;flex-wrap:wrap;column-gap:6px;font-size:15px;line-height:22px;color:rgb(255 255 255/.7)}
.sfoot .go p a{color:var(--white);font-weight:600;padding:11px 0;margin:-11px 0}
.sfoot .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 16px}
.sfoot .cols div{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sfoot .cols p{font-size:14px;line-height:20px;font-weight:600;color:rgb(255 255 255/.7)}
.sfoot .cols p a{font-size:inherit;line-height:inherit}
.sfoot .cols a{font-size:16px;line-height:22px;padding:4px 0;margin:-4px 0;background:linear-gradient(currentColor,currentColor) right bottom/0 1px no-repeat;transition:background-size .25s ease-out}
.sfoot .cols a:hover,.sfoot .cols a:focus-visible{background-position:left bottom;background-size:100% 1px}
.sfoot .base{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.sfoot .logo{color:var(--white);padding:8px 0;margin:-8px 0}
.sfoot .base p{font-size:14px;line-height:20px;color:rgb(255 255 255/.7)}
.sfoot .base p a{color:var(--white)}

@media (min-width:768px){
  .wrap{padding:0 60px}
  .nav{height:96px;margin:0 -12px}
  .menu{display:none}
  .logo{gap:10px}.logo>i>svg:first-child{width:26px;height:29px}
  .logo span{font-size:30px;line-height:32px;text-underline-offset:6px}
  .h2{font-size:72px;line-height:72px;letter-spacing:-.025em}
  .sfoot .wrap{gap:96px;padding-top:112px;padding-bottom:64px}
  .sfoot .ask h2{font-size:52px;line-height:58px}
  .sfoot .go p{font-size:16px;line-height:24px}
  .sfoot .cols{grid-template-columns:repeat(4,1fr);gap:32px}
  .sfoot .base{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1024px){
  .sfoot .ask{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .sfoot .ask h2{max-width:880px}
  .sfoot .cols{grid-template-columns:repeat(auto-fill,232px)}
}
@media (min-width:1280px){.cells{display:block}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.logo *,.hand{animation:none!important;transition:none!important}.btn svg,.start,.nav .links a,.ways a,.ways a i,.menu::after,.sfoot .cols a{transition:none}}

/* Proof: the logo wall, the proof chart and Recent wins. Home and /results. */
.clients .wrap{padding-top:40px;padding-bottom:48px}
.clients .label{padding-bottom:20px;font-weight:600}
.logos{display:grid;grid-template-columns:repeat(2,1fr);border:solid var(--line);border-width:1px 0 0 1px;list-style:none}
.logos li{display:flex;align-items:center;justify-content:center;height:88px;padding:0 12px;border:solid var(--line);border-width:0 1px 1px 0}
.logos img{display:block;max-width:100%;height:auto}
.logos a{display:flex;flex-direction:column;align-items:center;padding:8px;color:var(--blue);font-weight:600}
.logos a span:first-child{color:var(--graphite);font-weight:400}
.logos a span:last-child{text-decoration:underline 1px;text-underline-offset:3px}
.logos .next{grid-column:1/-1;height:64px}
.logos .next a{flex-direction:row;gap:8px}
.wins{scroll-margin-top:16px}
.wins .wrap{display:flex;flex-direction:column;gap:32px;padding-top:40px;padding-bottom:56px}
.wins .head{display:flex;flex-direction:column;gap:16px}
.wins .head p{max-width:430px;color:var(--graphite)}
.winlist{display:grid;border:solid var(--line);border-width:1px 0 0 1px;list-style:none}
.winlist li{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:24px;border:solid var(--line);border-width:0 1px 1px 0}
.winlist .who{display:flex;align-items:center;height:32px}
.winlist .who img{display:block}
.winlist .num{padding-top:40px;font:500 48px/52px var(--display);letter-spacing:-.02em;color:var(--blue);white-space:nowrap}
.winlist .what{padding-top:12px;font-size:18px;line-height:26px}
.winlist .when{font-size:14px;line-height:20px;color:var(--graphite)}
.proof .wrap{display:flex;flex-direction:column;gap:40px;padding-top:64px;padding-bottom:24px}
.proof .head{display:flex;flex-direction:column;gap:40px}
.stats{display:flex;gap:32px}
.stats div{width:192px;display:flex;flex-direction:column;gap:6px}
.stats p:first-child{font:500 44px/48px var(--display);letter-spacing:-.015em}
.stats p:last-child{color:var(--graphite)}
.chart{background:var(--white)}
.legend{display:flex;gap:28px;padding-bottom:16px;font-weight:500}
.legend span{display:flex;align-items:center;gap:10px}
.legend span::before{content:"";width:24px;height:4px;background:var(--blue)}
.legend span+span::before{height:2px;background:rgb(17 17 17/.45)}
.plot{display:flex;gap:16px}
.axis{display:none;width:48px;flex-shrink:0;flex-direction:column;justify-content:space-between;font-size:14px;line-height:20px;color:var(--graphite);text-align:right}
.axis+div+.axis{text-align:left}
.plot>div:not(.axis){position:relative;flex:1;min-width:0}
.plot img{display:block;width:100%;height:auto}
.plot .start-mark{position:absolute;top:-6px;left:45.3%;display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;color:var(--blue)}
.plot .start-mark::before{content:"";width:8px;height:8px;background:var(--blue)}
@media (min-width:640px){
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  .proof .wrap{padding:112px 80px 32px}
  .stats p:first-child{font-size:56px;line-height:56px}
  .chart{margin:0 -16px;padding:16px}
  .axis{display:flex}
  .plot .start-mark{top:12px;gap:8px;font-size:14px;line-height:20px}
  .clients .wrap{padding:40px 80px 72px}
  .logos li{height:112px}
  .wins .wrap{gap:56px;padding:32px 80px 128px}
  .wins .h2{font-size:56px;line-height:60px;letter-spacing:-.02em}
  .winlist{grid-template-columns:repeat(2,1fr)}
  .winlist li{gap:40px;padding:24px}
  .winlist .num{font-size:clamp(40px,4.3vw,64px);line-height:1}
}
@media (min-width:1024px){
  .logos{grid-template-columns:repeat(4,1fr)}
  .wins .head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .wins .head p{width:430px;padding-bottom:6px}
}
@media (min-width:1280px){
  .logos{grid-template-columns:repeat(6,1fr)}
  .winlist li{padding:32px}
}
@media (min-width:1360px){
  .proof .head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .stats{width:416px;padding-bottom:6px}
}

/* Segmented switch: 2px ink frame, the chosen option filled ink. Results (phone) and the platform crawler view. */
.seg{display:inline-flex;border:2px solid var(--ink);background:var(--white)}
.seg button{height:44px;padding:0 18px;font:600 16px/20px var(--text);color:var(--ink);background:none;border:0}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--white)}
.seg button:focus-visible{outline-offset:-4px;outline-color:var(--blue)}