/* Landing page (/). The hero (badge, wordmark, tagline, gradient products
   button, curvy lines) keeps the original page's styles from style.css; this
   file styles what follows it: the six stage cards and the "What you'll
   actually see" / "How it works" sections. */
.lp {
    --lp-tx: var(--text-primary, #1d1d1f);
    --lp-tx2: #55555c;
    --lp-tx3: #86868b;
    --lp-bd: var(--border-secondary, #e5e5ea);
    --lp-bl: var(--accent, #007aff);
    color: var(--lp-tx);
    background: #fff;
    overflow-x: clip;
    padding: 0 !important;
}
.lp a:hover, .lp a:focus { text-decoration: none; }

/* One hue per stage. */
.lp [data-stage="school"]          { --c: #007aff; }
.lp [data-stage="finished_school"] { --c: #1f9d4c; }
.lp [data-stage="undergrad"]       { --c: #6e4ff5; }
.lp [data-stage="grad"]            { --c: #c77700; }
.lp [data-stage="working_pro"]     { --c: #0f9488; }
.lp [data-stage="not_sure"]        { --c: #e0245e; }

/* ---------- stage cards ---------- */
.lp-top { position: relative; }
.lp-top > .lp-f-grid {
    position: relative; z-index: 1; width: 100%; max-width: 1080px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin: 6px auto 34px; padding: 0 16px; text-align: left;
}
.lp-f-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; gap: 22px; min-height: 188px;
    padding: 26px 24px 20px; border-radius: 22px;
    text-decoration: none; color: var(--lp-tx);
    border: 1px solid color-mix(in srgb, var(--c) 16%, #e9ebf0);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 11%, transparent), transparent 60%),
        linear-gradient(180deg, #fff, #fcfcfe);
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 10px 26px color-mix(in srgb, var(--c) 7%, transparent);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lp .lp-f-card:hover, .lp .lp-f-card:focus-visible {
    transform: translateY(-4px); color: var(--lp-tx);
    border-color: color-mix(in srgb, var(--c) 38%, #e9ebf0);
    box-shadow: 0 2px 4px rgba(20, 30, 60, .05), 0 18px 40px color-mix(in srgb, var(--c) 16%, transparent);
}
.lp-f-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 60%, transparent); outline-offset: 3px; }

/* the page's curvy line, small, in the card's own colour */
.lp-f-curl {
    position: absolute; right: -6px; bottom: -8px; width: 150px; height: 112px; z-index: -1;
    color: var(--c); opacity: .28; transition: opacity .25s ease, transform .35s ease;
}
.lp-f-card:hover .lp-f-curl { opacity: .45; transform: translate(-4px, -3px); }

.lp-f-top { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.lp-f-badge {
    width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; font-size: 28px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 20%, #fff), color-mix(in srgb, var(--c) 6%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 6px 14px color-mix(in srgb, var(--c) 14%, transparent);
    transition: transform .3s ease;
}
.lp-f-card:hover .lp-f-badge { transform: rotate(-6deg) scale(1.05); }
.lp-f-txt { display: grid; gap: 5px; min-width: 0; padding-top: 3px; }
.lp-f-t { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.lp-f-d { font-size: 13.5px; line-height: 1.45; color: var(--lp-tx2); }

.lp-f-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 16px;
    border-top: 1px dashed color-mix(in srgb, var(--c) 22%, #e5e7eb);
}
.lp-f-start {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--c) 80%, #1d1d1f);
}
.lp .lp-f-btn { margin: 0; padding: 8px 16px; font-size: 13px; gap: 4px; }
.lp-f-arrow { display: inline-block; margin-left: 4px; transition: transform .25s ease; }
.lp .lp-f-card:hover .lp-f-btn { background: var(--c); color: #fff; }
.lp .lp-f-card:hover .lp-f-btn .intro-btn-t { color: #fff; opacity: .85; }
.lp-f-card:hover .lp-f-arrow { transform: translateX(3px); }

/* ---------- "What you'll actually see" ---------- */
.lp-lower { position: relative; overflow: hidden; }
.lp-lower > .lp-proof, .lp-lower > .lp-how { position: relative; z-index: 1; }
.lp-proof { background: linear-gradient(180deg, rgba(243, 248, 255, .85) 0%, rgba(247, 243, 255, .85) 100%); padding: 64px 24px; }
.lp .lp-h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 6px; text-align: center; text-wrap: balance; color: var(--lp-tx); }
.lp .lp-proof-sub { text-align: center; color: var(--lp-tx2); margin: 0 auto 30px; font-size: 16px; }
.lp-examples { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-ex {
    padding: 20px; border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--c) 16%, #e9ebf0);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%),
        linear-gradient(180deg, #fff, #fcfcfe);
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 10px 26px color-mix(in srgb, var(--c) 7%, transparent);
}
.lp-ex--dna { --c: #6e4ff5; }
.lp-ex--ch  { --c: #007aff; }
.lp-ex--dl  { --c: #0f9488; }
.lp-tag {
    display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #a0680a; background: #fff4dc; border-radius: 6px; padding: 3px 7px;
}
.lp .lp-ex-h { margin: 12px 0 2px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--c); }
.lp .lp-ex-big { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 12px; color: var(--lp-tx); }
.lp-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 13.5px; margin: 0; }
.lp-kv dt { color: var(--lp-tx3); }
.lp-kv dd { margin: 0; font-weight: 600; text-align: right; }
.lp-sr, .lp-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.lp-sr li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--lp-bd); padding-bottom: 8px; }
.lp-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lp-b-s { background: #e6f7ea; color: #157a36; }
.lp-b-t { background: #e8f1ff; color: #0a58c2; }
.lp-b-r { background: #fdecec; color: #b42318; }
.lp .lp-ex-foot { margin: 8px 0 0; font-size: 12px; color: var(--lp-tx3); }
.lp-dl li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; }
.lp-dl b { font-variant-numeric: tabular-nums; }
.lp-dl small { display: block; color: var(--lp-tx3); font-size: 12px; margin-top: 2px; }

/* ---------- "How it works" ---------- */
.lp-how { max-width: 1180px; margin: 0 auto; padding: 64px 24px 56px; }
.lp-steps { list-style: none; counter-reset: lp; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp-steps li { counter-increment: lp; }
.lp-steps li::before {
    content: counter(lp); width: 32px; height: 32px; border-radius: 50%;
    font-weight: 800; font-size: 14px; display: grid; place-items: center;
}
.lp-steps li:nth-child(1)::before { background: rgba(0, 122, 255, .12); color: #007aff; }
.lp-steps li:nth-child(2)::before { background: rgba(52, 199, 89, .15); color: #1f9d4c; }
.lp-steps li:nth-child(3)::before { background: rgba(124, 92, 255, .14); color: #6e4ff5; }
.lp .lp-steps h3 { font-size: 17px; margin: 12px 0 4px; color: var(--lp-tx); }
.lp .lp-steps p { margin: 0; font-size: 14.5px; color: var(--lp-tx2); line-height: 1.55; }
.lp .lp-src { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 44px 0 0; font-size: 13.5px; color: var(--lp-tx3); }
.lp .lp-src b { color: #0a58c2; font-weight: 600; }

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
    .lp-top > .lp-f-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
    .lp-examples, .lp-steps { grid-template-columns: 1fr 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
    .lp-top > .lp-f-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; padding: 0; }
    .lp-f-card { padding: 19px 18px 16px; gap: 15px; border-radius: 18px; min-height: 0; }
    .lp-f-top { grid-template-columns: 48px 1fr; gap: 14px; }
    .lp-f-badge { width: 48px; height: 48px; font-size: 24px; border-radius: 14px; }
    .lp-f-t { font-size: 16px; }
    .lp-f-d { font-size: 13px; }
    .lp-f-foot { padding-top: 11px; }
    .lp-f-curl { width: 120px; height: 90px; }
    .lp-proof { padding: 40px 16px; }
    .lp .lp-h2 { font-size: 24px; }
    .lp-examples, .lp-steps { grid-template-columns: 1fr; gap: 12px; }
    .lp-steps { gap: 20px; }
    .lp-how { padding: 40px 16px 36px; }
    .lp .lp-src { gap: 8px 16px; margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-f-card, .lp-f-curl, .lp-f-badge, .lp-f-arrow { transition: none; }
    .lp .lp-f-card:hover { transform: none; }
    .lp-f-card:hover .lp-f-badge, .lp-f-card:hover .lp-f-curl { transform: none; }
}