/* A product's front page, in harrowsoft.com's look. Sits on top of kit.css for its tokens. */
.lp { --max: 1120px; font-size: 16px; line-height: 1.5; letter-spacing: -.011em; background: var(--bg); overflow-x: hidden; }
.lp-wrap { width: 100%; max-width: calc(var(--max) + 48px); margin-inline: auto; padding-inline: 24px; }
.lp-nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.lp-nav .lp-wrap { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.lp-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 620; letter-spacing: -.02em; font-size: 16.5px; }
.lp-brand img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.lp-brand small { font-weight: 400; font-size: 13px; color: var(--ink-3); letter-spacing: -.005em; }
.lp-links { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lp-link { padding: 6px 10px; border-radius: 99px; font-size: 14.5px; color: var(--ink-2); }
.lp-link:hover { color: var(--ink); }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 18px; border-radius: 99px; font-weight: 550; font-size: 14.5px; white-space: nowrap; transition: transform .15s, background-color .15s; }
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn.dark { background: var(--btn); color: var(--btn-ink); }
.lp-btn.dark:hover { background: var(--btn-hover); }
.lp-btn.soft { background: var(--bg-3); color: var(--ink); }
.lp-btn.soft:hover { background: var(--bg-4); }
.lp-btn.big { min-height: 50px; padding: 0 26px; font-size: 16px; }
.lp-hero { padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px); text-align: center; position: relative; }
.lp-hero::before { content: ""; position: absolute; inset: -40% 0 auto; height: 620px; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--a) 26%, transparent), transparent 100%); pointer-events: none; z-index: 0; }
.lp-hero > * { position: relative; z-index: 1; }
.lp-instead { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); font-size: 13.5px; color: var(--ink-2); margin-bottom: 20px; }
.lp-h1 { font-size: clamp(38px, 6.6vw, 76px); line-height: 1.02; letter-spacing: -.045em; font-weight: 640; margin-bottom: 18px; text-wrap: balance; }
.lp-lede { max-width: 38em; margin: 0 auto 26px; font-size: clamp(17px, 2vw, 20px); line-height: 1.42; color: var(--ink-2); text-wrap: pretty; letter-spacing: -.015em; }
.lp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lp-shot { margin: clamp(32px, 5vw, 56px) auto 0; max-width: 1040px; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 30px 80px color-mix(in srgb, var(--b) 18%, transparent), var(--shadow-2); }
.lp-shot-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.lp-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-4); }
.lp-shot-bar span { margin: 0 auto; font-size: 12px; color: var(--ink-3); }
.lp-shot img { width: 100%; height: auto; display: block; }
.lp-sect { padding-block: clamp(44px, 7vw, 88px); }
.lp-h2 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -.036em; font-weight: 630; margin-bottom: 12px; text-wrap: balance; }
.lp-h2 .dim { color: var(--ink-3); }
.lp-sub { max-width: 38em; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
.lp-center { text-align: center; }
.lp-center .lp-sub { margin-inline: auto; }
.lp-fixes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.lp-fix { padding: 22px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); display: grid; gap: 8px; align-content: start; }
.lp-fix h3 { font-size: 18px; font-weight: 620; letter-spacing: -.022em; line-height: 1.2; }
.lp-fix p { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.lp-fix .was { font-size: 13px; color: var(--ink-3); }
.lp-vs { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 15px; }
.lp-vs-wrap { border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.lp-vs th { text-align: left; font-weight: 550; font-size: 13.5px; color: var(--ink-3); padding: 14px 20px; border-bottom: 1px solid var(--line); }
.lp-vs td { padding: 14px 20px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.lp-vs tr:first-child td { border-top: 0; }
.lp-vs td:first-child { color: var(--ink-3); width: 44%; }
.lp-vs td:last-child { font-weight: 500; }
.lp-final { margin-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px); padding: clamp(36px, 6vw, 72px) 24px; border-radius: 26px; text-align: center; color: #fff; background: #0e0e11; position: relative; overflow: hidden; }
.lp-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--b) 55%, transparent), transparent 100%); }
.lp-final > * { position: relative; }
.lp-final .lp-h2 { color: #fff; }
.lp-final p { color: rgba(255, 255, 255, .72); max-width: 34em; margin: 0 auto 22px; }
.lp-final .lp-btn.dark { background: #fff; color: #0e0e11; }
.lp-final .lp-btn.soft { background: rgba(255, 255, 255, .13); color: #fff; }
.lp-price { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin-bottom: 18px; font-size: 15px; color: rgba(255, 255, 255, .72); }
.lp-price s { text-decoration-color: #ff6b6b; }
.lp-price b { font-size: 30px; font-weight: 640; letter-spacing: -.03em; color: #fff; }
.lp-foot { padding-block: 22px 34px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.lp-foot .lp-wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.lp-foot a:hover { color: var(--ink); }
.lp-foot .sp { margin-right: auto; }
@media (max-width: 860px) { .lp-fixes { grid-template-columns: minmax(0, 1fr); } .lp-link.hide-small { display: none; } .lp-brand small { display: none; } .lp-wrap { padding-inline: 16px; } }
@media (max-width: 520px) { .lp-vs td, .lp-vs th { padding: 11px 13px; font-size: 14px; } }