/* the guy - /compare/* (five competitor pages)
   rebuilt 2026-09-22 in the homepage's design language. tokens, header, menu
   drawer, buttons, labels, the faq accordion and the footer all come from
   /styles.css. this file styles the comparison components the pages share:
   the side-by-side threads, raw competitor output, diff cards and the table.
   ------------------------------------------------------------------------ */

html { overflow-x: clip; }

.cmp .container { max-width: 1040px; }

.cmp section { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--border); }
.cmp section.hero { border-top: 0; padding-top: clamp(48px, 7vw, 104px); }

/* hero -------------------------------------------------------------------- */
.hero-badge { margin-bottom: var(--stack-s); }

.cmp h1 {
    font-size: var(--fs-3xl);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: var(--stack-m);
}

.cmp h1 .dim { color: var(--gray); }

.hero-sub {
    max-width: 62ch;
    font-size: var(--fs-m);
    line-height: 1.7;
    color: var(--gray);
}

/* type -------------------------------------------------------------------- */
.cmp h2 {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: var(--stack-m);
}

.cmp h3 {
    font-size: var(--fs-m);
    line-height: 1.4;
    margin: var(--stack-m) 0 var(--stack-s);
}

.section-text { max-width: 66ch; }
.section-text p { font-size: var(--fs-m); line-height: 1.8; margin-bottom: 1.2em; }
.section-text p:last-child { margin-bottom: 0; }
.section-text span { color: var(--green); }
.section-text .red,
.cmp .red { color: var(--red); }

/* verbal tics: chips in the losing color */
.tics-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--stack-s); }
.tics-list span {
    font-size: var(--fs-xs);
    color: var(--red);
    border: 1px solid rgba(255, 107, 107, 0.35);
    padding: 6px 12px;
}

/* side-by-side threads ---------------------------------------------------- */
.chat-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    margin: var(--stack-m) 0 var(--stack-l);
    align-items: start;
}

.chat-box {
    border: 1px solid rgba(57, 255, 20, 0.55);
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 0 40px -10px rgba(57, 255, 20, 0.18);
}

.chat-box.bad { border-color: rgba(255, 107, 107, 0.35); box-shadow: none; }

.chat-label {
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: 6px;
}

.chat-label::before { content: '// '; }
.chat-box.bad .chat-label { color: var(--red); }

.chat-msg {
    font-size: var(--fs-xs);
    line-height: 1.55;
    padding: 9px 12px;
    max-width: 88%;
}

/* his side right, hers left, same as the homepage threads */
.chat-msg.sent {
    align-self: flex-end;
    background: var(--green);
    color: var(--black);
}

.chat-box.bad .chat-msg.sent {
    background: transparent;
    color: var(--red);
    border: 1px solid rgba(255, 107, 107, 0.45);
}

.chat-msg.received {
    align-self: flex-start;
    background: rgba(237, 237, 237, 0.08);
    color: var(--white);
}

/* the prompt he typed into the other tool, and its commentary */
.chat-msg.userq,
.chat-msg.analysis {
    align-self: stretch;
    max-width: none;
    background: transparent;
    color: var(--gray);
    font-style: italic;
    border-left: 2px solid var(--border);
}

.chat-box.bad .chat-msg.userq { border-left-color: rgba(255, 107, 107, 0.35); }

.chat-result {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--green);
}

.chat-result::before { content: '> '; }
.chat-box.bad .chat-result { color: var(--red); border-top-color: rgba(255, 107, 107, 0.25); }
.chat-box.bad .chat-result::before { content: 'x '; }

/* a stage note inside a thread ("what happens next", "option 1") */
.chat-note {
    font-size: var(--fs-3xs);
    letter-spacing: 0.08em;
    color: var(--gray);
    padding: 4px 0;
}

.chat-note-bad { color: rgba(255, 107, 107, 0.7); }

/* p.section-text is used as a one-line setup above a thread */
p.section-text { font-size: var(--fs-m); color: var(--gray); margin-bottom: var(--stack-s); }

/* raw competitor output --------------------------------------------------- */
.gpt-output,
.claude-output {
    max-width: 66ch;
    margin: var(--stack-s) 0;
    padding: clamp(14px, 1.8vw, 20px);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-left: 2px solid var(--red);
    font-size: var(--fs-s);
    line-height: 1.7;
    color: var(--white);
}

.gpt-output .label,
.claude-output .label {
    display: block;
    color: var(--red);
    margin-bottom: 8px;
}

/* diff cards -------------------------------------------------------------- */
.diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    margin: var(--stack-m) 0;
}

.diff-card,
.diff-box {
    border: 1px solid rgba(57, 255, 20, 0.55);
    padding: clamp(18px, 2.2vw, 28px);
}

.diff-card.bad,
.diff-box.bad { border-color: rgba(255, 107, 107, 0.35); }

.diff-card h3,
.diff-box .box-title {
    margin: 0 0 var(--stack-s);
    font-size: var(--fs-s);
    font-weight: 700;
    color: var(--green);
}

.diff-card.bad h3,
.diff-box.bad .box-title { color: var(--red); }

.diff-card ul,
.diff-box ul { list-style: none; }

.diff-card li,
.diff-box li {
    position: relative;
    padding-left: 1.5em;
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--white);
}

.diff-card li + li,
.diff-box li + li { margin-top: 6px; }

.diff-card li::before,
.diff-box li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}

.diff-card.bad li::before,
.diff-box.bad li::before { content: 'x'; color: var(--red); }

/* feature table ----------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: var(--stack-m) 0; }

.compare-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--fs-xs);
}

.compare-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--green);
    border-bottom: 1px solid var(--green);
}

.compare-table th.them { color: var(--red); }

.compare-table td {
    padding: 12px 14px;
    vertical-align: top;
    line-height: 1.55;
    color: var(--white);
    border-bottom: 1px solid var(--border);
}

.compare-table td:first-child { color: var(--gray); }
.compare-table td.them { color: rgba(255, 107, 107, 0.85); }
.compare-table td:last-child { background: rgba(57, 255, 20, 0.04); }

.tc, .tx, .tm { font-weight: 700; margin-right: 6px; }
.tc { color: var(--green); }
.tx { color: var(--red); }
.tm { color: var(--gray); }

/* faq --------------------------------------------------------------------- */
.faq-section .faq-list { margin-top: var(--stack-m); }

/* closer ------------------------------------------------------------------ */
.cmp section.final-section { text-align: center; }

.final-line {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.final-sub {
    font-size: var(--fs-l);
    color: var(--gray);
    margin: 10px 0 var(--stack-m);
}

.final-section .btn::before { animation-delay: 1.4s; }

/* other comparisons ------------------------------------------------------- */
.compare-links {
    padding: var(--stack-m) 0 var(--stack-l);
    border-top: 1px solid var(--border);
}

.compare-links-label {
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: var(--stack-s);
}

.compare-links-label::before { content: '// '; }

.compare-links-list { display: flex; flex-wrap: wrap; gap: 8px; }

.compare-links-list a {
    font-size: var(--fs-xs);
    color: var(--white);
    text-decoration: none;
    border: 1px solid rgba(57, 255, 20, 0.35);
    padding: 9px 14px;
    transition: background 150ms ease, border-color 150ms ease;
}

.compare-links-list a:hover { background: var(--green-dim); border-color: var(--green); }