/* The sales page. Layout approved by the owner 2026-10-30 (option A with option B's hero). */

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2rem; } }
h1 .soft, h2 .soft { display: block; font-weight: 500; }
/* each app in its own colour (owner, 2026-10-30); approximations of each brand, checked for contrast */
.app { font-weight: 700; }
.app.reddit { color: var(--reddit); } .app.linkedin { color: var(--linkedin); }
.app.gamma { color: #6D28D9; } .app.zenodo { color: #1565C0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app.gamma { color: #B79CFF; } :root:not([data-theme="light"]) .app.zenodo { color: #6CB4FF; } }

/* what you need: three numbered must-haves, then one small line */
.need { padding: 4rem 0 0; }
.need h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.25rem; }
.need ol { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: need; display: grid; gap: .75rem; }
@media (min-width: 56rem) { .need ol { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.need li { counter-increment: need; display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: start; padding: 1rem; border-radius: 12px; background: var(--tile); font-size: 1.0625rem; font-weight: 700; }
.need li::before { content: counter(need); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--kr-black); color: var(--kr-yellow); font: 800 1rem/1 var(--font-display); }
.need .fine { max-width: 40rem; }

/* fit chart: for you on lilac, not for you on grey, one topic per row */
.fit { padding: 4rem 0 1rem; }
.fit h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
.fit table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.fit th, .fit td { padding: .9rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.fit thead th { border-top: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; }
.fit .topic { width: 9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.fit .yes { background: var(--kit-seo); color: var(--kr-black); }
.fit .no { background: var(--tile); color: var(--fg); }
.fit td.yes, .fit td.no { position: relative; padding-left: 2.6rem; }
.fit td.yes::before, .fit td.no::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.fit td.yes::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fit td.no::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); color: #8A877F; }
.fit td.no { color: var(--fg); }
.fit .note { margin: 1rem 0 0; font-size: 1.125rem; font-weight: 700; max-width: 40rem; }
.fit .act { margin-top: 1.5rem; }
@media (max-width: 40rem) {
  .fit thead { display: none; }
  .fit tr { display: grid; grid-template-columns: 1fr; }
  .fit .topic { width: auto; border-top: 1px solid var(--line); padding-bottom: .4rem; }
  .fit tbody tr:first-child .topic { border-top: 0; }
  .fit td.yes, .fit td.no { border-top: 0; }
}

/* hero, as in option B: a full-width lilac band, one column (owner, 2026-10-30) */
.top { background: var(--kit-seo); color: var(--kr-black); }
.top .in { padding-top: 1.25rem; padding-bottom: 3.5rem; }
.top .col { max-width: 46rem; }
.top h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); margin: 3rem 0 1.25rem; }
.top .lead { font-size: 1.25rem; max-width: 36rem; }
.top .act { margin-top: 1.75rem; }
.top .buy { background: var(--kr-black); color: var(--kr-yellow); }
.top .ph { background: var(--kr-white); }
.top .logo-light { display: block; } .top .logo-dark { display: none !important; }

/* hero detail: wins as a 2x2 of white cards on lilac, facts as chips */
.top .sub { font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.4; max-width: 38rem; margin: 0 0 1.75rem; }
.wins { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; max-width: 46rem; }
@media (min-width: 40rem) { .wins { grid-template-columns: 1fr 1fr; } }
.wins li { position: relative; display: grid; gap: .2rem; padding: 1rem 1rem 1rem 3.25rem; background: var(--kr-white); color: var(--kr-black); border-radius: 12px; box-shadow: 0 6px 18px rgba(20,20,20,.08); }
.wins li::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--kr-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23FFD400' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.wins b { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.2; }
.wins span { font-size: .9375rem; color: #3B3A36; line-height: 1.45; }
.top .who { margin: 1.25rem 0 0; font-weight: 700; }
.chips { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { display: grid; gap: .1rem; padding: .55rem .9rem; border-radius: 10px; background: rgba(250,250,247,.55); border: 1px solid rgba(20,20,20,.12); line-height: 1.2; }
.chips b { font-size: .9375rem; }
.chips span { font-size: .8125rem; color: #3B3A36; }

.msg { max-width: 85%; padding: .55rem .85rem; border-radius: 14px; font-size: .9375rem; line-height: 1.45; }
.msg.you { justify-self: end; background: var(--kr-black); color: var(--kr-white); border-bottom-right-radius: 4px; }
.msg.ai { justify-self: start; background: var(--tile); border-bottom-left-radius: 4px; }
.msg.draft { justify-self: start; background: var(--kit-seo); color: var(--kr-black); border-bottom-left-radius: 4px; }
.msg small { display: block; font-weight: 700; font-size: .75rem; margin-bottom: .2rem; }
.msg.you + .msg.ai, .msg.ai + .msg.you, .msg.draft + .msg.you { margin-top: .4rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.you { background: var(--kr-white); color: var(--kr-black); } }
:root[data-theme="dark"] .msg.you { background: var(--kr-white); color: var(--kr-black); }

/* how it works: numbered steps, the order is the information */
.steps { padding: 4rem 0 1rem; }
.steps h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.25rem; }
.steps ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; row-gap: .15rem; padding: 1rem 0; border-top: 1px solid var(--line); font-size: 1.0625rem; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--kit-seo); color: var(--kr-black); font: 800 1.125rem/1 var(--font-display); }
.steps li > b { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
@media (min-width: 48rem) { .steps li { grid-template-columns: 2.5rem 11rem 1fr; align-items: center; } .steps li::before { grid-row: auto; } }

/* what you get: three claims, one with the editor demo */
.get { padding: 3.5rem 0 1rem; display: grid; gap: 0; }
.get article { display: grid; gap: .75rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.get article:first-child { border-top: 0; padding-top: 0; }
.get h3 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); }
.get p { font-size: 1.125rem; max-width: 34rem; }
@media (min-width: 56rem) { .get article { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.demo { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.demo ol { list-style: none; margin: 0; padding: 1rem; display: grid; gap: .5rem; }
/* the editor works inside the kit, so every bubble sits on one side (owner, 2026-10-30) */
.demo .msg { justify-self: start; margin-top: 0; border-radius: 14px; border-bottom-left-radius: 4px; }
.demo .cut { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--muted); }
.demo .note { padding: 0 1rem 1rem; font-size: .75rem; color: var(--muted); }

.honest { background: var(--kr-yellow); color: var(--kr-black); padding: 4rem 0; }
.honest h2 { font-size: clamp(2.25rem, 6vw, 4rem); margin-bottom: 1rem; }
.honest > .wrap > p { font-size: 1.25rem; max-width: 36rem; }
.honest ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; max-width: 46rem; font-size: 1.125rem; }
.honest li { padding-top: .75rem; border-top: 1px solid rgba(20,20,20,.25); }

.honest .why { font-family: var(--font-display); font-size: 1.5rem; margin: 2rem 0 .75rem; }
.vs { width: 100%; max-width: 46rem; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; background: var(--kr-white); color: var(--kr-black); font-size: 1rem; }
.vs th, .vs td { padding: .75rem 1rem; text-align: left; border-top: 1px solid rgba(20,20,20,.1); }
.vs thead th { border-top: 0; font-family: var(--font-display); font-weight: 800; }
.vs thead th:nth-child(2), .vs td:nth-child(2) { color: #8A2D00; }
.vs thead th:nth-child(3), .vs td:nth-child(3) { background: var(--kit-seo); font-weight: 700; }
.vs tbody th { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: #55534E; width: 9rem; }
@media (max-width: 30rem) { .vs th, .vs td { padding: .6rem .6rem; font-size: .9375rem; } .vs tbody th { width: auto; } }
.faq { padding: 4rem 0 2rem; max-width: 44rem; }
.faq h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.close { padding: 3rem 0 4.5rem; display: grid; gap: 1.25rem; justify-items: start; }
.close h2 { font-size: clamp(2.5rem, 6vw, 4rem); }

/* the real price-climb rule under the first button */
.top .climb { margin: .75rem 0 0; font-size: .9375rem; font-weight: 700; }