/* ============================================================
   SOLUTIONS (solutions.html). Loads after site.css + pages.css.
     .what ............ one-sentence product explanation (.steps3 and .flow live in site.css)
     .prob-sec ........ one problem: h2, .who, then .pgrid (problem | what we do | example)
     .ex .............. a concrete example, as a short exchange (.ex-you / .ex-ai / .ex-out)
     .firsts .......... good first jobs, small linked tiles
   ============================================================ */

/* ---------- hero: what it is ---------- */
.what h1{max-width:14ch}
.what-is{max-width:58ch;margin-top:22px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;font-weight:500;text-wrap:pretty}
.what-is b{font-weight:800;color:var(--signal)}

.jump4{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.jump4 a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule);font-weight:700;font-size:15px;text-decoration:none;color:var(--chalk)}
.jump4 a:hover{border-color:var(--signal);color:var(--signal)}
.jump4-h{max-width:none;letter-spacing:0;margin-top:40px;font-weight:700;font-size:16px;color:var(--chalk-dim)}
.jump4-h+.jump4{margin-top:12px}

/* ---------- one problem ---------- */
.prob-sec h2{max-width:24ch}
.who{margin-top:12px;font-size:17px;color:var(--p-dim)}
.who b{color:var(--p-strong)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:28px 40px;margin-top:40px;border-top:2px solid var(--p-ink);padding-top:24px}
.pcol h3{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--p-accent);margin-bottom:10px}
.pcol p{font-size:16.5px;line-height:1.55;color:var(--p-ink)}
.pcol p+p{margin-top:10px}
.ticks{list-style:none}
.ticks li{position:relative;padding:0 0 10px 28px;font-size:16.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:var(--p-good);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:980px){.pgrid{grid-template-columns:1fr}}

/* ---------- example card ---------- */
.ex{background:var(--p-fill);padding:18px 18px 20px;font-size:15.5px;line-height:1.5}
.ex p{font-size:15.5px}
.ex-you,.ex-ai,.ex-out{padding:10px 12px;margin-top:8px}
.pcol .ex-you{background:var(--sea);color:var(--paper)}
.s-night .pcol .ex-you{background:var(--chalk);color:var(--sea)}
.ex-ai{border:1px solid var(--p-rule)}
.ex-out{background:rgba(29,117,86,.14);font-weight:700}
.ex-t{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;opacity:.75;margin-bottom:2px}
.ex :first-child{margin-top:0}

/* ---------- good first jobs ---------- */
.firsts-h{margin-top:40px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.firsts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.firsts>li>*{display:block;height:100%;padding:16px 18px;border:1px solid var(--p-rule);color:inherit;text-decoration:none}
.firsts a:hover{border-color:var(--p-ink)}
.firsts b{display:block;font-size:17px;letter-spacing:-.015em}
.firsts span{display:block;margin-top:4px;font-size:15px;color:var(--p-dim)}
.firsts a b::after{content:" \2192"}
@media(max-width:820px){.firsts{grid-template-columns:1fr}}

/* ---------- routines ---------- */
.rlist{list-style:none}
.rlist li{padding:10px 0;border-bottom:1px solid var(--p-rule);font-size:15.5px;line-height:1.45}
.rlist li:first-child{padding-top:0}
.rlist b{display:block;color:var(--p-accent)}