@font-face {
  font-family: 'Silkscreen';
  src: url('Silkscreen-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f8f7f3;
  --ink: #24291f;
  --muted: #62685b;
  --accent: #687b51;
  --line: #d9dccf;
  --pixel: 'Silkscreen', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 550; line-height: 1.08; letter-spacing: -1.5px; text-wrap: balance; }
h1 { font-size: clamp(64px, 7.4vw, 108px); letter-spacing: -5.4px; }
h2 { font-size: clamp(34px, 4.1vw, 52px); }
p { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }
em { color: var(--accent); font-style: normal; }
a:link, a:visited { color: var(--ink); text-decoration-color: #87917a; text-underline-offset: 4px; }
a:hover { color: #53663d; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #596d43; outline-offset: 5px; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
kbd { display: inline-block; padding: 1px 5px; border: 1px solid #b7bfaa; border-bottom-width: 2px; border-radius: 3px; background: #eeefe6; color: #38432d; font: 11px/1.7 ui-monospace, monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px; background: var(--ink); color: white!important; }
.skip-link:focus { top: 15px; }
.lap-page { max-width: 1380px; padding: 0 64px; margin: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 118px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand img { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 9px; }
.brand span { font: 40px/1 var(--pixel); color: var(--ink); }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a { font-size: 13px; text-decoration: none; color: #555f4c; }
.hero { padding: 92px 0 114px; text-align: center; }
.hero h1 { max-width: 1100px; margin: auto; }
.hero > p { max-width: 610px; margin: 30px auto 32px; font-size: 19px; line-height: 1.75; }
.download-button:link, .download-button:visited { display: inline-flex; gap: 7px; align-items: center; justify-content: center; padding: 15px 21px; border: 1px solid var(--ink); border-radius: 5px; background: var(--ink); color: #fafbf6; text-decoration: none; font-size: 14px; font-weight: 550; line-height: 1.5; transition: background 100ms, transform 100ms; }
/* The shine stays inside the button; the hover bubble can sit above it. */
.download-button { position: relative; isolation: isolate; }
.download-button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 42%, #ffffff30 50%, transparent 58%) 200% 0 / 250% 100% no-repeat; animation: download-shine 6s ease-in-out infinite; }
.download-button::after { content: "It's free btw"; position: absolute; bottom: calc(100% + 12px); left: 50%; padding: 9px 13px; width: max-content; border: 1px solid #a5b194; border-radius: 9px 9px 9px 0; background: #f0f2e7; color: #334328; box-shadow: 2px 3px 0 #cad3be; font: 10px/1.7 var(--pixel); pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 120ms ease-out, transform 120ms ease-out; }
.download-button:hover::after, .download-button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@keyframes download-shine { 0% { background-position: 200% 0; } 22%, 100% { background-position: -100% 0; } }
.download-button:hover { background: #3b4731; transform: translateY(-1px); }
.download-button:active { transform: translateY(1px); }
.eyebrow { color: #68745c; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.8; }
.walkthrough { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 64px; align-items: start; }
.story-steps, .guide-stage, .practice-workbench > div { min-width: 0; }
.story-step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 70px 0; border-top: 1px solid var(--line); scroll-margin-top: 50px; }
.story-step h2 { margin: 22px 0; font-size: clamp(32px,3.25vw,44px); }
.story-copy > p:not(.eyebrow) { max-width: 390px; font-size: 17px; line-height: 1.8; }
.story-step .step-detail { margin-top: 22px; font-size: 14px!important; color: #6a735f; }
.story-step--compare { min-height: 100svh; }
.guide-stage { position: sticky; top: max(24px, calc((100svh - var(--lap-window-height, 762px)) / 2)); padding-top: 0; }
/* The embedded app retains its original dark desktop UI, unchanged. This frame
   fits its actual edges; no card, side gutters, or stretching is added. */
.native-app-viewport { position: relative; width: 100%; margin-inline: auto; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #626b55; border-radius: 13px; background: #292e25; box-shadow: 0 30px 65px -20px #26331e40, 0 8px 20px -8px #25311c38, 0 1px 3px #1d271b1a; }
.native-app-viewport iframe { position: absolute; left: 50%; top: 0; width: 620px; height: 760px; max-width: none; display: block; border: 0; transform-origin: top center; background: #292e25; }
.native-app-viewport.guided-app { pointer-events: none; }
.practice-section { padding: 96px 0 90px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 45px; }
.section-heading h2 { margin-top: 14px; max-width: 540px; }
.section-heading > p { max-width: 480px; font-size: 17px; }
.practice-workbench { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; padding-bottom: 75px; }
.practice-game { position: relative; border: 1px solid #c9cebf; border-radius: 12px; overflow: hidden; background: #fcfcf8; box-shadow: 0 28px 55px -22px #26331e38, 0 8px 18px -8px #26331e2e; }
.game-heading { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 14px 16px; color: #526044; font: 9px/1.6 var(--pixel); }
.game-heading span:last-child { color: #69705f; font: 10px/1.5 ui-monospace, monospace; }
.practice-game > canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.game-cover { position: absolute; top: 42px; left: 0; right: 0; aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; background: #17252bd9; backdrop-filter: blur(2px); text-align: center; }
.game-cover[hidden] { display: none; }
.game-cover h3 { color: #f1f3e9; font-size: 29px; letter-spacing: -.9px; }
.game-cover p { color: #d3ded0; font-size: 13px; }
.checker { display: inline-block; width: 28px; height: 22px; background: conic-gradient(#d9e5d1 25%,#334238 0 50%,#d9e5d1 0 75%,#334238 0) 0 0/14px 14px; }
.game-coach { min-height: 76px; padding: 15px 17px; border-top: 1px solid #d6dccd; color: #59634e; font-size: 12px; line-height: 1.7; }
.practice-lap { position: relative; }
.demo-role-label { margin: 0 auto 18px; color: #46553a; font-size: 13px; font-weight: 550; text-align: center; text-wrap: balance; }
.practice-shortcuts { position: absolute; top: 100%; width: 100%; margin-top: 20px; color: #67715b; font-size: 11px; line-height: 2.3; text-align: center; }
.practice-results { margin-top: 24px; font-size: 13px; }
.practice-results:empty { display: none; }
.research-section { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 64px; padding: 105px 0; border-top: 1px solid var(--line); }
.research-heading h2 { margin: 22px 0 25px; font-size: clamp(34px,3.3vw,45px); }
.research-heading > p:last-child { font-size: 15px; }
.research-body { max-width: 700px; }
.research-essay p { color: #4c5544; font-size: 17px; line-height: 1.95; margin-bottom: 28px; }
.research-essay q { color: #283a21; font-weight: 600; quotes: '“' '”' '‘' '’'; }
.research-essay sup { margin-left: 3px; font-size: 10px; line-height: 0; }
.research-essay sup a { text-decoration: none; color: #4f673b; }
.research-addition { margin: 0; padding: 0; }
.research-addition h3 { margin-bottom: 24px; font-size: clamp(27px, 2.5vw, 34px); line-height: 1.2; letter-spacing: -.8px; }
.research-addition p { color: #4c5544; font-size: 17px; line-height: 1.95; margin-bottom: 28px; }
.research-addition sup { margin-left: 3px; font-size: 10px; line-height: 0; }
.research-addition sup a { color: #4f673b; text-decoration: none; }
.research-sources { padding: 22px 0 0 18px; margin: 5px 0 0; border-top: 1px solid var(--line); }
.research-sources li { padding-left: 4px; margin: 12px 0; font-size: 11px; color: #68715d; line-height: 1.8; scroll-margin-top: 30px; }
.research-sources a { color: #3f5034; }
.faq-section { padding: 65px 0 100px; border-top: 1px solid var(--line); }
.faq-section h2 { font-size: 33px; margin-bottom: 35px; }
.lap-download__faq { max-width: 900px; }
.lap-download__faq details { border-bottom: 1px solid var(--line); }
.lap-download__faq summary { position: relative; list-style: none; padding: 20px 35px 20px 0; font-size: 17px; color: #333e2a; }
.lap-download__faq summary::-webkit-details-marker { display: none; }
.lap-download__faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 24px; font-weight: 300; color: #708260; }
.lap-download__faq details[open] summary::after { content: '−'; }
.lap-download__faq p { font-size: 15px; max-width: 740px; padding: 0 10px 22px 0; }
.final-cta { padding: 95px 0 100px; border-top: 1px solid var(--line); text-align: center; }
.final-cta h2 { margin: 25px auto; font-size: clamp(40px,5.6vw,70px); letter-spacing: -2.7px; }
.final-cta .final-lead { max-width: 650px; margin: 0 auto 20px; font-size: 21px; line-height: 1.65; color: #3d4a32; }
.final-cta > p:not(.eyebrow):not(.final-lead) { margin: 20px auto; max-width: 640px; font-size: 15px; }
.final-cta .download-button { margin: 13px 0; }
.final-cta .mac-soon { margin-top: 23px!important; font-size: 17px!important; }
.final-cta .diagnostics-copy { max-width: 560px!important; font-size: 11px!important; }
.site-footer { display: flex; justify-content: center; text-align: center; gap: 20px; padding: 30px 0 40px; border-top: 1px solid var(--line); color: #66705b; font-size: 12px; }
.site-footer a { color: #526247; }
.noscript-note { padding: 20px; text-align: center; background: #e8eddf; color: #35462b; }
/* Reveal only the page copy; the original app stays sharp and interactive. */
.motion-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity 360ms ease-out, transform 360ms ease-out; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
/* A few requested little reminders; overlays never reserve page space. */
.lap-popups { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.lap-bubble { pointer-events: auto; cursor: default; transition: left 350ms cubic-bezier(.22,.7,.2,1); position: absolute; bottom: 14%; visibility: hidden; width: max-content; max-width: calc(100% - 32px); padding: 14px 17px; background: #f0f2e7; color: #334328; border: 2px solid #77866c; box-shadow: 4px 4px 0 #cad3be; font: 10px/1.8 var(--pixel); }
.lap-bubble--left { left: 16px; --bubble-offscreen: calc(-100% - 32px); --bubble-overshoot: 16px; --bubble-tilt: -8deg; transform-origin: left center; }
.lap-bubble--right { right: 16px; bottom: 26%; --bubble-offscreen: calc(100% + 32px); --bubble-overshoot: -16px; --bubble-tilt: 8deg; transform-origin: right center; }
.lap-bubble::after { content: ''; position: absolute; top: 100%; left: 22px; width: 14px; height: 12px; background: #77866c; clip-path: polygon(0 0,100% 0,100% 4px,66% 4px,66% 8px,33% 8px,33% 12px,0 12px); }
.lap-bubble--right::after { left: auto; right: 22px; transform: scaleX(-1); }
.lap-bubble span { font: 19px/1 system-ui; vertical-align: middle; }
.lap-bubble.is-active { visibility: visible; animation: bubble-pop 400ms ease-out; }
.lap-bubble.is-on-right::after { left: auto; right: 22px; transform: scaleX(-1); }
@keyframes bubble-pop {
  0% { opacity: 0; transform: translateX(var(--bubble-offscreen)) rotate(-6deg) scale(.8); }
  70% { opacity: 1; transform: translateX(8px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
.diagnostics-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 0 24px; max-width: 650px; }
.diagnostics-categories h3 { font-size: 14px; letter-spacing: 0; }
.diagnostics-categories ul { padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.9; }
@media (min-width: 1500px) { .lap-page { max-width: 1460px; }.walkthrough { gap: 90px; } }
@media (max-width: 1100px) {
  .lap-page { padding-inline: 38px; }
  .walkthrough, .research-section { gap: 32px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .section-heading { gap: 40px; }
  .practice-workbench { gap: 25px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hero h1 { letter-spacing: -4px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 15px; }
  .lap-page { padding-inline: 24px; }
  .site-header { min-height: 95px; }.brand { gap: 9px; }.brand img { width: 37px; height: 37px; }.brand span { font-size: 31px; }
  .site-header nav { gap: 17px; }.site-header nav a { font-size: 11px; }.site-header nav a:last-child { display: none; }
  .hero { padding: 68px 0 75px; }.hero h1 { font-size: clamp(53px,10.4vw,78px); letter-spacing: -3.3px; }.hero > p { font-size: 17px; margin-block: 26px; }
  .download-button:link, .download-button:visited { padding: 14px 17px; font-size: 13px; }  .walkthrough { display: flex; flex-direction: column; gap: 0; }
  .guide-stage { order: 0; top: 0; z-index: 10; width: 100%; padding: 12px 0 17px; background: #f8f7f3f5; backdrop-filter: blur(8px); }
  .story-steps { order: 1; width: 100%; }
  .story-step { min-height: 72svh; padding: 42px 0 65px; scroll-margin-top: calc(49svh + 35px); }
  .story-step h2 { font-size: 34px; margin-block: 18px; }.story-copy > p:not(.eyebrow) { font-size: 16px; }.story-step .step-detail { margin-top: 18px; font-size: 13px!important; }
  .story-step--compare { min-height: 100svh; }
  .native-app-viewport { border-radius: 9px; box-shadow: 0 16px 30px -12px #26331e4a,0 3px 8px #25311c18; }
  .practice-section { padding: 65px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; }.section-heading h2 { font-size: 38px; margin-top: 15px; }.section-heading > p { font-size: 16px; }
  .practice-workbench { grid-template-columns: 1fr; gap: 28px; }
  .practice-player { position: relative; }.practice-game { position: relative; top: auto; }.game-heading { padding: 11px 12px; font-size: 8px; }.game-heading span:last-child { font-size: 9px; }
  .game-cover { top: 35px; padding: 12px; gap: 12px; }.game-cover h3 { font-size: 25px; }.game-cover p { font-size: 11px; }
  .game-coach { font-size: 11px; min-height: 65px; padding: 12px; }
  .practice-player:has(.is-running) { position: sticky; top: 0; z-index: 15; }.practice-player:has(.is-running) > .demo-role-label { display: none; }.practice-game.is-running .game-coach { font-size: 10px; line-height: 1.5; min-height: 0; padding: 9px 12px; }.practice-game.is-running .game-heading { padding-block: 7px; }
  .practice-shortcuts { position: static; font-size: 10px; margin-top: 15px; }.practice-workbench { padding-bottom: 0; }.demo-role-label { font-size: 12px; margin-bottom: 14px; }
  .research-section { grid-template-columns: 1fr; gap: 35px; padding: 65px 0; }.research-heading h2 { font-size: 38px; }.research-heading > p:last-child { font-size: 14px; }.research-essay p, .research-addition p { font-size: 16px; line-height: 1.9; }
  .faq-section { padding: 50px 0 65px; }.faq-section h2 { font-size: 30px; }.lap-download__faq summary { font-size: 16px; }.lap-download__faq p { font-size: 14px; }
  .final-cta { padding: 65px 0 60px; }.final-cta h2 { font-size: 45px; letter-spacing: -1.8px; }.final-cta .final-lead { font-size: 18px; }.final-cta > p:not(.eyebrow):not(.final-lead) { font-size: 14px; }.final-cta .mac-soon { font-size: 15px!important; }
  .site-footer { font-size: 11px; }.lap-bubble { padding: 11px 12px; font-size: 8px; max-width: calc(100% - 24px); }.lap-bubble--left { left: 12px; }.lap-bubble--right { right: 12px; }
}
@media (max-width: 360px) {
  .lap-page { padding-inline: 19px; }.site-header nav { gap: 12px; }.site-header nav a { font-size: 10px; }.brand span { font-size: 28px; }.brand img { width: 33px; height: 33px; }
  .hero h1 { font-size: 48px; letter-spacing: -2.8px; }.game-heading { font-size: 7px; }.game-heading span:last-child { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none!important; transition: none!important; }
  .lap-bubble.is-active { opacity: 1; transform: none; }
}