/* OCALLY · use-case.css: the long-form use case pages and their hub. Tokens and components come from base.css.
   A reading page: a page title and dek, the short answer on navy, a sticky contents rail, a 46rem measure, numbered
   sections, pull quotes and figures that make a point, then how Ocally helps, questions and sources. */
html, body { background: var(--paper); }
.uc { color: var(--navy); }
.uc-progress { position: fixed; z-index: 60; left: 0; top: var(--bar); width: 100%; height: 3px; appearance: none; border: 0; background: transparent; }
.uc-progress::-webkit-progress-bar { background: transparent; } .uc-progress::-webkit-progress-value { background: var(--orange); } .uc-progress::-moz-progress-bar { background: var(--orange); }

.uc-hero { padding: clamp(48px, 9vh, 112px) var(--edge) clamp(40px, 7vh, 80px); background: var(--sky); }
.uc-crumbs { display: flex; gap: 10px; margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.uc-crumbs a { color: var(--orange-ink); text-decoration: none; }
.uc-crumbs a:hover { color: var(--navy); }
.uc-h1 { margin: clamp(20px, 3.4vh, 32px) 0 0; max-width: 15em; font: var(--t-h1); letter-spacing: var(--ls-h1); text-wrap: balance; }
.uc-h1 span { color: var(--orange); }
.uc-dek { margin: var(--gap-lede) 0 0; max-width: 34em; font: var(--t-lead); color: var(--body); text-wrap: pretty; }
.uc-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }

/* the short answer, on navy */
.uc-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px var(--gap-cols); padding: clamp(48px, 8vh, 88px) var(--edge); background: var(--navy); color: var(--on-navy); }
.uc-brief__k { grid-column: 1 / -1; margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--amber); }
.uc-brief__a { margin: 0; font: var(--t-lead); font-weight: 500; color: var(--on-navy); }
.uc-brief__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.uc-brief__list li { position: relative; padding-left: 26px; font: var(--t-body); color: var(--on-navy-body); }
.uc-brief__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }

/* the article and its contents rail */
.uc-body { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: var(--gap-cols); padding: clamp(56px, 9vh, 104px) var(--edge); }
.uc-toc { position: sticky; top: calc(var(--bar) + 32px); align-self: start; }
.uc-toc__k { margin: 0 0 14px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.uc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.uc-toc a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font: var(--t-small); font-weight: 500; color: var(--muted); text-decoration: none; }
.uc-toc a:hover { color: var(--navy); }
.uc-toc a.is-on { border-color: var(--orange); color: var(--navy); }
.uc-article { min-width: 0; max-width: 46rem; }
.uc-sec { padding-bottom: clamp(32px, 5vh, 56px); scroll-margin-top: calc(var(--bar) + 24px); }
.uc-sec__n { margin: 0 0 10px; font: var(--t-label); letter-spacing: var(--ls-label); color: var(--orange-ink); }
.uc-article h2 { margin: 0 0 18px; font: var(--t-h4); letter-spacing: var(--ls-h4); color: var(--navy); text-wrap: balance; }
.uc-article p { margin: 0 0 18px; font: var(--t-read); color: var(--body); }
.uc-article em { font-style: normal; font-weight: 600; color: var(--navy); background: linear-gradient(transparent 62%, rgba(235, 173, 33, .4) 62%); }
.uc-cite { font: 700 .62em/1 var(--mono); }
.uc-cite a { color: var(--orange-ink); text-decoration: none; padding: 0 1px; }
.uc-brief .uc-cite a { color: var(--amber); }
.uc-pull { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--orange); font: var(--t-h4); letter-spacing: var(--ls-h4); color: var(--navy); }

/* figures that make a point */
.uc-fig { margin: 30px 0 34px; }
.uc-fig__k { margin: 0 0 12px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.uc-article .uc-fig__src { margin: 10px 0 0; font: var(--t-fine); color: var(--muted); }
.uc-fig__src a { color: inherit; }
.uc-stat { padding: 26px 28px; background: var(--sky); border-left: 6px solid var(--orange); }
.uc-stat b { display: block; font: var(--t-h2); letter-spacing: var(--ls-h2); color: var(--orange); }
.uc-stat figcaption { margin-top: 10px; max-width: 26em; font: var(--t-lead); font-weight: 500; color: var(--navy); }
.uc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uc-compare > div { padding: 22px; border: var(--rule); }
.uc-compare .is-old { background: var(--cream); } .uc-compare .is-new { background: #fff; box-shadow: var(--lift) var(--orange); }
.uc-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uc-compare li { position: relative; padding-left: 20px; font: var(--t-card); color: var(--body); }
.uc-compare li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: #BFC5D1; }
.uc-compare .is-new li::before { background: var(--orange); }
.uc-steps ol, .uc-time ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.uc-steps li { position: relative; counter-increment: s; display: grid; gap: 4px; padding: 16px 0 16px 56px; border-top: 1px solid var(--line); }
.uc-steps li::before { content: counter(s); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--on-navy); font: var(--t-h6); }
.uc-steps b { font: var(--t-h6); letter-spacing: var(--ls-h6); color: var(--navy); } .uc-steps span { font: var(--t-card); color: var(--body); }
.uc-time ol { border-left: 2px solid var(--line); }
.uc-time li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 10px 0 10px 22px; }
.uc-time li::before { content: ""; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.uc-time b { font: var(--t-data); color: var(--navy); } .uc-time span { font: var(--t-card); color: var(--body); }
.uc-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uc-bars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 12px; font: var(--t-small); font-weight: 500; }
.uc-bars i { height: 16px; width: var(--w); background: var(--navy); }
.uc-bars li:first-child i { background: var(--orange); }
.uc-bars b { font: var(--t-data); }

/* how Ocally helps */
.uc-ocally { margin-top: 24px; padding: clamp(28px, 4vw, 48px); background: var(--cream); border: var(--rule); box-shadow: var(--lift-l) var(--navy); scroll-margin-top: calc(var(--bar) + 24px); }
.uc-ocally__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.uc-ocally__pt { position: relative; display: grid; gap: 6px; padding: 18px 40px 18px 18px; background: var(--paper); border: var(--rule); color: var(--navy); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.uc-ocally__pt:hover { transform: translate(-2px, -2px); box-shadow: var(--lift) var(--orange); }
.uc-ocally__pt b { font: var(--t-h6); letter-spacing: var(--ls-h6); } .uc-ocally__pt span { font: var(--t-small); color: var(--body); }
.uc-ocally__pt i { position: absolute; right: 16px; top: 16px; font-style: normal; color: var(--orange); }

/* questions and sources */
.uc-faq { padding-top: clamp(48px, 8vh, 88px); scroll-margin-top: calc(var(--bar) + 24px); }
.uc-sources { padding-top: clamp(40px, 6vh, 72px); scroll-margin-top: calc(var(--bar) + 24px); }
.uc-article .uc-sources h2 { font: var(--t-h5); letter-spacing: var(--ls-h5); }
.uc-sources ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.uc-sources li { font: var(--t-small); color: var(--muted); scroll-margin-top: calc(var(--bar) + 24px); }
.uc-sources li:target { background: var(--tint-amber); }
.uc-sources a { color: var(--body); }

/* the close */
.uc-cta { padding: var(--sec-y) var(--edge); text-align: center; background: var(--orange); color: #fff; }
.uc-cta h2 { margin: 0 auto; max-width: 14em; font: var(--t-h1); letter-spacing: var(--ls-h1); }
.uc-cta p { margin: var(--gap-lede) auto 0; max-width: 32em; font: var(--t-lead); color: #fff; }
.uc-cta__go { justify-content: center; margin-top: 32px; }
.uc-more { padding: clamp(48px, 8vh, 80px) var(--edge); }
.uc-more__k { margin: 0 0 18px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.uc-more div { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.uc-more a { font: var(--t-h5); letter-spacing: var(--ls-h5); color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 4px; }
.uc-more a:hover { color: var(--orange-ink); }

/* the hub */
.uc--hub .uc-hero { padding-bottom: clamp(56px, 9vh, 96px); }
.uc--hub .uc-h1 { margin-top: clamp(20px, 3.4vh, 32px); }
.uc-hubgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); padding: clamp(56px, 9vh, 96px) var(--edge) var(--sec-y); }
.uc-hubcard { display: flex; flex-direction: column; gap: 14px; padding: var(--card-pad); background: #fff; border: var(--rule); box-shadow: var(--lift) var(--navy); color: var(--navy); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.uc-hubcard:nth-child(1) { background: var(--cream); } .uc-hubcard:nth-child(2) { background: var(--tint-blue); } .uc-hubcard:nth-child(3) { background: var(--tint-green); }
.uc-hubcard:hover { transform: translate(-2px, -2px); box-shadow: var(--lift-l) var(--orange); }
.uc-hubcard__n { margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.uc-hubcard h2 { margin: 0; font: var(--t-h4); letter-spacing: var(--ls-h4); text-wrap: balance; }
.uc-hubcard p:not(.uc-hubcard__n) { margin: 0; font: var(--t-card); color: var(--body); }
.uc-hubcard > span { margin-top: auto; padding-top: 12px; font: var(--t-ui); }

@media (max-width: 1000px) { .uc-body { grid-template-columns: minmax(0, 1fr); } .uc-toc { display: none; } .uc-hubgrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .uc-brief { grid-template-columns: 1fr; } .uc-compare, .uc-ocally__grid { grid-template-columns: 1fr; } .uc-time li { grid-template-columns: 1fr; gap: 2px; } .uc-bars li { grid-template-columns: 1fr auto; } .uc-bars li i { grid-column: 1 / -1; grid-row: 2; } }