/* Kadara Use Cases (Slice 4). Consumes theme.css + rp-system.css +
   kadara-solutions.css (footer + sol- primitives). `uc-` namespace. */

/* hub groups */
.uc-hub-group { margin-top: 40px; }
.uc-hub-group + .uc-hub-group { margin-top: 8px; }
.uc-hub-label { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-brass-text); margin: 0 0 4px; padding-top: 20px; border-top: 1px solid var(--line); }
.uc-future { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--sub); max-width: 66ch; }
.uc-future b { color: var(--ink); font-weight: 600; }
.uc-future a { color: var(--brand-verdigris-text); text-decoration: none; }
.uc-future a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* "connects to Solution" ribbon */
.uc-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; padding: 14px 18px; border: 1px solid var(--brand-verdigris-line); border-radius: 12px; background: var(--brand-verdigris-soft); }
.uc-connect .uk { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-verdigris-text); }
.uc-connect .ut { font-size: 15px; color: var(--ink); }
.uc-connect a { margin-left: auto; font-family: var(--ff-mono); font-size: 12px; font-weight: 600; color: var(--brand-verdigris-text); text-decoration: none; white-space: nowrap; }
.uc-connect a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .uc-connect a { margin-left: 0; } }

/* two short columns: hard today / what changes */
.uc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.uc-two .uc-col h3 { font-family: var(--ff-heading); font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 12px; }
.uc-two .uc-col p { font-size: 15px; line-height: 1.6; color: var(--sub); margin: 0; max-width: 44ch; }
.uc-two .uc-col .uk { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
.uc-two .uc-col.hard .uk { color: var(--faint); }
.uc-two .uc-col.chg .uk { color: var(--brand-verdigris-text); }
@media (max-width: 760px) { .uc-two { grid-template-columns: 1fr; } }

/* claim-readiness checklist proof */
.uc-check { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.uc-check .uc-check-bar { font-family: var(--ff-mono); font-size: 12px; color: var(--sub); padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-section); }
.uc-check-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.uc-check-row:first-child { border-top: none; }
.uc-check-row .ck { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.uc-check-row.ok .ck { background: var(--brand-verdigris-soft); color: var(--brand-verdigris-text); }
.uc-check-row.miss .ck { background: var(--red-bg); color: var(--red); }
.uc-check-row .cl { color: var(--ink); }
.uc-check-row.miss .cl { font-weight: 600; }
.uc-check-row .cs { margin-left: auto; font-family: var(--ff-mono); font-size: 11px; color: var(--faint); }
.uc-check-row.miss .cs { color: var(--red); }

/* payment timeline proof */
.uc-paytl { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; position: relative; }
.uc-paytl::before { content: ""; position: absolute; left: 12%; right: 12%; top: 15px; height: 2px; background: var(--line); }
.uc-paytl .pt { position: relative; text-align: center; padding: 0 10px; }
.uc-paytl .pt .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); margin: 8px auto 16px; }
.uc-paytl .pt.done .dot { background: var(--brand-verdigris); border-color: var(--brand-verdigris); }
.uc-paytl .pt.now .dot { border-color: var(--brand-brass-text); }
.uc-paytl .pt .pl { font-family: var(--ff-heading); font-size: 15px; font-weight: 700; color: var(--ink); }
.uc-paytl .pt .pd { display: block; font-size: 13px; color: var(--sub); margin-top: 4px; }