/* ==========================================================
   Case study v3 — clean, reading-first.
   One centred reading column (~46rem) for words, a wider one
   (~68rem) for images, cards and tables. Small uppercase labels,
   compact semibold headings, serif-italic statements, soft grey
   surfaces, no borders or heavy shadows. Scoped to #case.
   Previous version: _backup/case-2026-10-14/case.css
   ========================================================== */
#case {
  --cs-read: 46rem;
  --cs-wide: 68rem;
  --cs-card: #FAFAF8;
  --cs-rad: 1.1rem;
  --cs-gap: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 400 !important;
  letter-spacing: -.011em !important;
  color: var(--ink);
}
#case .wrap { max-width: var(--cs-wide); }

/* ---------- type ---------- */
#case h1, #case h2, #case h3, #case .next-card b, #case .st-persona b, #case .st-fonts b {
  font-family: var(--display) !important; font-weight: 600 !important; font-stretch: normal !important;
  text-transform: none !important; color: var(--ink);
}
#case h2 em, #case h1 em, #case h3 em { font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; color: var(--accent) !important; letter-spacing: -.01em !important; }
#case .eyebrow, #case .cs-h, #case .meta-grid dt, #case .st-card .k, #case .st-quote cite, #case .st-table thead th, #case .cs-impact li span, #case .crumbs {
  font-family: var(--body) !important; font-weight: 500 !important; font-size: .7rem !important; line-height: 1.4 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--muted) !important;
}
#case p, #case li, #case dd, #case td, #case th { letter-spacing: -.011em; }
#case strong { color: var(--ink); font-weight: 600; }

/* ---------- cover ---------- */
#case .case-cover { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; background: none; border: 0; overflow: visible; }
#case .case-cover::before { display: none; }
#case .case-cover .wrap { display: flex; flex-direction: column; }
#case .case-cover .wrap > :not(.case-hero):not(.meta-grid) { width: 100%; max-width: var(--cs-read); margin-inline: auto; }
#case .crumbs { margin: 0 auto 2.2rem !important; }
#case .crumbs a { color: inherit; text-decoration: none; }
#case .crumbs a:hover { color: var(--ink); }
#case .case-cover .eyebrow { margin-top: 0; margin-bottom: .9rem; }
#case .case-cover h1 { margin: 0 auto .9rem; font-size: clamp(2.1rem, 4.6vw, 3.1rem) !important; line-height: 1.05 !important; letter-spacing: -.035em !important; }
#case .case-cover .desc { margin: 0 auto 1.6rem; font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.55; color: var(--muted); }
#case .case-cover .row { gap: .6rem; }
#case .case-cover .btn, #case .case-next .btn { min-height: 2.6rem; font-size: .9rem; }
/* image first, then the facts card under it */
#case .case-hero { order: 5; width: 100%; margin: clamp(2.2rem, 4vw, 3rem) 0 0; border: 0; border-radius: var(--cs-rad); overflow: hidden; background: var(--cs-card); box-shadow: none; }
#case .case-hero img { display: block; width: 100%; max-height: 40rem; object-fit: cover; object-position: top; }
#case .case-hero.is-phone img { padding: 2rem 0 0; max-height: 38rem; object-fit: contain; }
#case .meta-grid { order: 6; width: 100%; max-width: var(--cs-read); margin: 1.2rem auto 0; padding: .4rem 1.4rem; border: 0; border-radius: var(--cs-rad); background: var(--cs-card); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
#case .meta-grid div { padding: .95rem 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
#case .meta-grid div:nth-last-child(-n+2) { border-bottom: 0; }
#case .meta-grid dd { margin: .3rem 0 0; font-size: .95rem; font-weight: 500; line-height: 1.4; }

/* ---------- impact: one soft card, numbers in a grid ---------- */
#case .cs-impact { padding: var(--cs-gap) 0 0; background: none; color: var(--ink); }
#case .cs-impact-head { display: block; max-width: var(--cs-read); margin: 0 auto 1.4rem; }
#case .cs-impact .eyebrow { margin: 0 0 .7rem; }
#case .cs-impact h2 { max-width: none; margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.85rem) !important; line-height: 1.2 !important; letter-spacing: -.025em !important; color: var(--ink); }
#case .cs-impact-grid { list-style: none; padding: 0; max-width: var(--cs-read); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1px; border-radius: var(--cs-rad); background: color-mix(in srgb, var(--ink) 7%, var(--cs-card)); overflow: hidden; }
@media (min-width: 700px) {
  #case .cs-impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #case .cs-impact-grid:has(> li:nth-child(4)), #case .cs-impact-grid:not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#case .cs-impact li { display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.5rem; border: 0; border-radius: 0; background: var(--cs-card); gap: .35rem; }
#case .cs-impact li::marker { content: none; }
#case .cs-impact li b { white-space: nowrap; font: 600 24px/1.05 var(--display) !important; letter-spacing: -.035em !important; color: var(--ink) !important; }
#case .cs-impact li p { margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }

/* ---------- sections: one column, no background bands ---------- */
#case .cs { padding: var(--cs-gap) 0 0; background: none !important; border: 0; }
#case .cs-head { display: block; max-width: var(--cs-read); margin: 0 auto 1.6rem; }
#case .cs-head .eyebrow { margin: 0 0 .7rem; }
#case .cs-head h2 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.85rem) !important; line-height: 1.2 !important; letter-spacing: -.025em !important; }
#case .cs-head .lead { margin: .8rem 0 0; font-size: 1.02rem; line-height: 1.65; color: var(--muted); }
#case .cs-body { display: flex; flex-direction: column; gap: 1.4rem; }
#case .cs-body > * { width: 100%; max-width: var(--cs-read); margin: 0 auto !important; }
#case .cs-body > :is(.st-fig, .st-duo, .st-shots, .st-phones, .st-cards, .st-table, .st-personas, .st-pal) { max-width: var(--cs-wide); }
#case .st-p { max-width: var(--cs-read); font-size: 1.02rem; line-height: 1.7; color: var(--muted); }
#case .cs-h { margin: 0 0 .7rem; }
#case .tags { max-width: var(--cs-read); margin: 0 auto; gap: .4rem; padding: 0; }
#case .tags li { padding: .35rem .75rem; border: 0; border-radius: 999px; background: var(--cs-card); font-size: .8rem; font-weight: 500; }
/* the one-line takeaway after the brief: a soft card with a serif statement */
#case .cs-note { max-width: var(--cs-read); margin: 1.4rem auto 0; padding: clamp(1.3rem, 2.6vw, 1.8rem); border-radius: var(--cs-rad); background: var(--cs-card);
  font: 400 clamp(1.35rem, 2.3vw, 1.75rem)/1.3 var(--serif) !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ink); }

/* ---------- cards ---------- */
#case .st-cards { gap: .8rem; border: 0; }
@media (max-width: 760px) { #case .st-cards { grid-template-columns: 1fr; } }
#case .st-card, #case .st-card + .st-card { padding: 1.25rem 1.3rem 1.35rem; border: 0; border-radius: var(--cs-rad); background: var(--cs-card) !important; color: var(--ink); }
#case .st-card .k { display: block; margin-bottom: .6rem; }
#case .st-card h3 { margin: 0 0 .4rem; font-size: 1.08rem !important; line-height: 1.3 !important; letter-spacing: -.02em !important; color: var(--ink) !important; }
#case .st-card p, #case .st-card ul { font-size: .92rem; line-height: 1.55; color: var(--muted) !important; }
#case .st-card.is-hot { background: var(--ink) !important; color: var(--paper); }
#case .st-card.is-hot h3 { color: var(--paper) !important; }
#case .st-card.is-hot .k { color: color-mix(in srgb, var(--paper) 65%, transparent) !important; }
#case .st-card.is-hot p, #case .st-card.is-hot ul { color: color-mix(in srgb, var(--paper) 72%, transparent) !important; }

/* ---------- statements / quotes ---------- */
#case .st-quote { padding: clamp(1.4rem, 2.8vw, 2rem); border: 0; border-radius: var(--cs-rad); background: var(--cs-card); color: var(--ink); }
#case .st-quote p { margin: 0; font: 400 clamp(1.35rem, 2.3vw, 1.75rem)/1.3 var(--serif) !important; letter-spacing: -.01em !important; color: var(--ink); text-transform: none !important; }
#case .st-quote strong { font-weight: 400; color: var(--ink); font-style: italic; }
#case .st-quote cite { display: block; margin-top: 1rem; font-style: normal; }

/* ---------- media ---------- */
#case .st-fig { border: 0; border-radius: var(--cs-rad); overflow: hidden; box-shadow: none; background: var(--cs-card); }
#case .st-fig figcaption, #case .st-phone figcaption { padding: .7rem .2rem 0; border: 0; background: var(--paper); font-size: .82rem; line-height: 1.45; color: var(--muted); }
#case .st-duo, #case .st-shots { gap: .8rem; }
@media (max-width: 600px) { #case .st-duo, #case .st-shots { grid-template-columns: 1fr; } }
#case .st-phones { gap: clamp(.8rem, 2vw, 1.4rem); justify-content: center; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--cs-rad); background: var(--cs-card); }
#case .st-phone { flex: 0 1 14rem; border: 0; background: none; }
#case .st-phone .scr { border: 5px solid #0c0c0d; border-radius: 1.4rem; box-shadow: 0 1.4rem 2.4rem -1.6rem rgba(0,0,0,.45); background: #0c0c0d; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#case .st-phone:hover .scr { transform: translateY(-.3rem); }
#case .st-phone figcaption { background: none; text-align: center; }

/* ---------- flow, questions, tables, personas, palette ---------- */
#case .st-flow { gap: .4rem; }
#case .st-flow li { padding: .4rem .75rem; border: 0; border-radius: 999px; background: var(--cs-card); font-size: .82rem; font-weight: 500; }
#case .st-flow li::before { font-size: .7rem; color: var(--muted); }
#case .st-flow li.is-hot { background: var(--ink); color: var(--paper); }
#case .st-flow li.is-hot::before { color: color-mix(in srgb, var(--paper) 65%, transparent); }
#case .st-qs { border: 0; border-radius: var(--cs-rad); background: var(--cs-card); padding: .3rem 1.3rem; }
#case .st-qs li { padding: .85rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); font-size: .95rem; }
#case .st-qs li:last-child { border-bottom: 0; }
#case .st-table { border: 0; border-radius: var(--cs-rad); background: var(--cs-card); }
#case .st-table th, #case .st-table td { padding: .8rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); font-size: .9rem; }
#case .st-table thead th { background: none; }
#case .st-table tbody tr:last-child > * { border-bottom: 0; }
#case .st-table th[scope="row"] { font-weight: 600; }
#case .st-personas { gap: .8rem; }
#case .st-persona, #case .st-fonts div { border: 0; border-radius: var(--cs-rad); padding: 1.2rem 1.3rem; background: var(--cs-card); }
#case .st-persona b { font-size: 1.15rem !important; letter-spacing: -.02em !important; }
#case .st-fonts b { font-size: 2rem !important; }
#case .st-pal { gap: .6rem; }
#case .st-pal .sw { border-radius: .8rem; overflow: hidden; }
#case .st-links { margin-top: .4rem; gap: .6rem; }

/* ---------- client quote at the end ---------- */
#case .cs > .wrap > .st-quote { max-width: var(--cs-read); margin-inline: auto; }

/* ---------- next ---------- */
#case .case-next { padding: var(--cs-gap) 0 clamp(4rem, 8vw, 6rem); background: none; }
#case .case-next .wrap > * { max-width: var(--cs-read); margin-inline: auto; }
#case .case-next .eyebrow { margin-bottom: .9rem; }
#case .next-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); gap: 1rem; align-items: center; padding: .7rem; border: 0; border-radius: var(--cs-rad); background: var(--cs-card); color: var(--ink); text-decoration: none; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#case .next-card:hover { transform: translateY(-.2rem); box-shadow: none; background: var(--cs-card); }
#case .next-card .t { grid-column: auto; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem; }
#case .next-card .t .mono { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#case .next-card b { font-size: clamp(1.3rem, 2.2vw, 1.6rem) !important; line-height: 1.15 !important; letter-spacing: -.025em !important; }
#case .next-card em { font-style: normal; font-size: .85rem; color: var(--muted); }
#case .next-card .im { grid-column: auto; border-radius: .8rem; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper); }
#case .next-card .im img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
#case .case-next .row { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

/* ---------- phone ---------- */
@media (max-width: 600px) {
  #case .meta-grid { padding: .2rem 1.1rem; }
  #case .next-card { grid-template-columns: 1fr; }
  #case .next-card .im { order: -1; aspect-ratio: 16 / 10; }
  #case .cs-body { gap: 1.1rem; }
}

/* ==========================================================
   Two-column layout: facts panel on the left stays put (sticky),
   the story on the right scrolls. Phones: panel sits under the cover.
   ========================================================== */
#case .cs-layout { width: min(100% - 2 * var(--gut), 78rem); margin-inline: auto; }
#case .cs-layout .wrap { width: 100%; max-width: none; padding-inline: 0; margin-inline: 0; }
#case .cs-side { margin-top: 1.2rem; }

/* tag pills */
#case .cs-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
#case .cs-pills li { padding: .5rem .8rem; border-radius: .55rem; background: color-mix(in srgb, var(--accent) 7%, var(--paper)); color: color-mix(in srgb, var(--ink) 80%, var(--accent)); font: 600 .7rem/1.2 var(--body); letter-spacing: .04em !important; text-transform: uppercase; }

/* facts card */
#case .cs-facts { margin: 0; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 1.3rem; background: var(--paper); }
#case .cs-facts > div + div { margin-top: 1.35rem; }
#case .cs-facts dt { font: 600 .68rem/1.3 var(--body) !important; letter-spacing: .16em !important; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 78%, transparent); }
#case .cs-facts dd { margin: .45rem 0 0; font-size: .93rem; line-height: 1.5; color: var(--muted); }
#case .cs-status { display: flex; align-items: baseline; gap: .55rem; }
#case .cs-status i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #5E8C6A; transform: translateY(-.05em); }
#case .cs-status.is-ongoing i { background: #3BAA5C; box-shadow: 0 0 0 0 rgba(59,170,92,.5); animation: csPing 2.2s infinite; }
@keyframes csPing { 70% { box-shadow: 0 0 0 .45rem rgba(59,170,92,0); } 100% { box-shadow: 0 0 0 0 rgba(59,170,92,0); } }
#case .cs-facts-impact ul { list-style: none; margin: .2rem 0 0; padding: 0; }
#case .cs-facts-impact li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
#case .cs-facts-impact li:last-child { border-bottom: 0; padding-bottom: 0; }
#case .cs-facts-impact li span { display: block; font-size: .9rem; line-height: 1.4; color: var(--muted); }
#case .cs-facts-impact li b { flex: none; max-width: 50%; text-align: right; font: 600 .95rem/1.3 var(--display); letter-spacing: -.01em !important; color: var(--ink); }

@media (min-width: 1000px) {
  #case { --cs-read: 42rem; --cs-wide: 100%; }
  #case .cs-layout { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  #case .case-cover { grid-column: 2; grid-row: 1; }
  #case .cs-flow { grid-column: 2; grid-row: 2; min-width: 0; }
  #case .cs-side { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; margin: 0; }
  #case .cs-side-in { position: sticky; top: calc(var(--head-h, 4.75rem) + 1.25rem); max-height: calc(100vh - var(--head-h, 4.75rem) - 2.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 1rem; }
  #case .cs-side-in::-webkit-scrollbar { display: none; }
  /* right column reads left-aligned, like the references */
  #case .case-cover .wrap > :not(.case-hero):not(.meta-grid),
  #case .cs-head, #case .cs-body > *, #case .cs-impact-head, #case .cs-impact-grid, #case .tags, #case .cs-note,
  #case .case-next .wrap > *, #case .cs > .wrap > .st-quote { margin-left: 0 !important; margin-right: auto !important; }
  #case .crumbs { margin-left: 0 !important; }
}
#case .cs-facts-impact li span::first-letter { text-transform: uppercase; }

/* ---------- TUNED: case study type (from the case study type tuner, 2026-10-14) ---------- */
@media (min-width: 700px) {
html:root:not(#unc-a):not(#unc-b) .case-cover .crumbs { font-size: 9px !important; letter-spacing: 0.12em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .eyebrow { letter-spacing: -0.02em !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover h1 { font-size: 45px !important; letter-spacing: -0.04em !important; line-height: 1.05 !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover h1 span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .desc { font-size: 15px !important; letter-spacing: -0.011em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .row .btn { font-size: 14px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .row .btn span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-pills li { font-size: 10.5px !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts dt { letter-spacing: 0.075em !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts dd { font-size: 14px !important; letter-spacing: -0.03em !important; line-height: 1.5 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts-impact li b { font-size: 15px !important; letter-spacing: -0.011em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts-impact li b span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts-impact li span { font-size: 13.5px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head .eyebrow { font-size: 10.5px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head h2 { font-size: 30px !important; letter-spacing: -0.032em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head h2 span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head h2 em { font-size: 30px !important; letter-spacing: -0.01em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-grid li span { font-size: 10px !important; letter-spacing: 0.035em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-grid li p { font-size: 12.5px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head .eyebrow { font-size: 10.5px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head h2 { font-size: 30px !important; letter-spacing: -0.032em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head h2 span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head h2 em { font-size: 30px !important; letter-spacing: -0.01em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head .lead { font-size: 15px !important; letter-spacing: -0.011em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body > p:not(.cs-h), html:root:not(#unc-a):not(#unc-b) .cs-body li:not(.st-flow li) { font-size: 15px !important; letter-spacing: -0.011em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body .cs-h { font-size: 10.5px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .st-card .k { font-size: 10.5px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .st-card h3 { font-size: 16.5px !important; letter-spacing: -0.011em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .st-card h3 span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .st-card p, html:root:not(#unc-a):not(#unc-b) .st-card li { font-size: 13px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .st-phone figcaption { font-size: 11.5px !important; letter-spacing: -0.005em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body thead th { font-size: 10.5px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body tbody th { font-size: 13px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body tbody th span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body td { font-size: 13px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .case-next .eyebrow { font-size: 10.5px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .next-card em { font-size: 12px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .next-card em span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .case-next .link-arrow { font-size: 13px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .case-next .link-arrow span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
}
@media (max-width: 699.98px) {
html:root:not(#unc-a):not(#unc-b) .case-cover .crumbs { font-size: 9px !important; letter-spacing: 0.12em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .eyebrow { letter-spacing: 0.025em !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .desc { font-size: 14px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .row .btn { font-size: 13px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .case-cover .row .btn span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-pills li { font-size: 10px !important; letter-spacing: 0.01em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts dt { font-size: 10px !important; letter-spacing: 0.01em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts dd { font-size: 13.5px !important; letter-spacing: -0.015em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts-impact li b { font-size: 15px !important; letter-spacing: -0.011em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts-impact li b span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-facts-impact li span { font-size: 14px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head .eyebrow { font-size: 10px !important; letter-spacing: 0.015em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head h2 { font-size: 28px !important; letter-spacing: -0.032em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head h2 span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-head h2 em { font-size: 28px !important; letter-spacing: -0.01em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-grid li b { font-size: 24px !important; letter-spacing: -0.032em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-grid li b span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-grid li span { font-size: 10px !important; letter-spacing: 0.09em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-impact-grid li p { font-size: 13px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head .eyebrow { font-size: 10px !important; letter-spacing: 0.015em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head h2 { font-size: 28px !important; letter-spacing: -0.032em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head h2 span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head h2 em { font-size: 28px !important; letter-spacing: -0.01em !important; line-height: 1.12 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-head .lead { font-size: 14px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body > p:not(.cs-h), html:root:not(#unc-a):not(#unc-b) .cs-body li:not(.st-flow li) { font-size: 14px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .cs .tags li { font-size: 11.5px !important; letter-spacing: 0.005em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .st-card .k { font-size: 10.5px !important; letter-spacing: 0.02em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .st-card h3 { font-size: 16px !important; letter-spacing: -0.011em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .st-card h3 span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .st-card p, html:root:not(#unc-a):not(#unc-b) .st-card li { font-size: 14px !important; letter-spacing: 0em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .st-phone figcaption { font-size: 11px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .st-flow li { font-size: 12px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .st-flow li span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body thead th { font-size: 10px !important; letter-spacing: 0.02em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body tbody th { font-size: 12px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body tbody th span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .cs-body td { font-size: 12px !important; letter-spacing: -0.005em !important; line-height: 1.6 !important; }
html:root:not(#unc-a):not(#unc-b) .case-next .eyebrow { font-size: 10.5px !important; letter-spacing: 0.025em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .next-card em { font-size: 12px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .next-card em span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
html:root:not(#unc-a):not(#unc-b) .case-next .link-arrow { font-size: 12px !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; }
html:root:not(#unc-a):not(#unc-b) .case-next .link-arrow span:not(.sticker):not(.st):not(.hc-script) { letter-spacing: inherit !important; }
}
:root[data-theme="dark"] #case { --cs-card: var(--panel); }

/* ---------- full-height phone screenshots (opt-in: phones block with full: true) ---------- */
#case .st-phones--full { align-items: flex-start; }
#case .st-phones--full .st-phone { flex: 0 1 14rem; max-width: 16rem; }
#case .st-phones--full .st-phone .scr { max-height: none; }
#case .st-phones--full .st-phone img { display: block; height: auto; }
@media (max-width: 600px) { #case .st-phones--full .st-phone { flex-basis: min(16rem, 80%); } }

/* ---------- metric card (opt-in: metric block) ---------- */
#case .st-metric { max-width: var(--cs-wide); display: grid; gap: 1.6rem; align-items: center; padding: clamp(1.5rem, 3.5vw, 2.6rem); border-radius: var(--cs-rad); background: var(--cs-card); color: var(--ink); }
@media (min-width: 900px) { #case .st-metric { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
#case .st-metric-num { margin: 0; font: 600 clamp(3.6rem, 10vw, 6.4rem)/.9 var(--display) !important; letter-spacing: -.05em !important; font-variant-numeric: tabular-nums; color: var(--accent, var(--ink)); }
#case .st-metric-t { margin: .5rem 0 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
#case .st-metric-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
#case .st-metric-facts dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#case .st-metric-facts dd { margin: .15rem 0 0; font-weight: 600; }
#case .st-metric-ev { margin: 0; }
#case .st-metric-ev img { display: block; width: 100%; max-width: 592px; height: auto; border-radius: .9rem; background: #fff; box-shadow: 0 1rem 2rem -1.4rem rgba(0,0,0,.35); }
#case .st-metric-ev figcaption { padding: .7rem .2rem 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }

/* =========================================================
   Dotin diagrams (opt-in blocks: wire, sitemap, wphones, journey)
   Minimal: monochrome line wireframes, labelled boxes, one grid.
   ========================================================= */
#case :is(.dw, .dsm, .dph, .dj) {
  --w-ln: color-mix(in srgb, var(--ink) 18%, transparent); --w-ln2: color-mix(in srgb, var(--ink) 9%, transparent);
  --w-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: var(--cs-rad); background: var(--cs-card); color: var(--ink);
}
#case .cs-body > :is(.dw, .dsm, .dph, .dj) { max-width: var(--cs-wide); }
#case :is(.dw, .dsm, .dph, .dj) :is(p, b, em, h3, dt, dd, li, figcaption, button) { letter-spacing: 0 !important; }

/* wireframe atoms */
#case .wx { display: flex; align-items: center; justify-content: center; min-height: 1.75rem; padding: .3rem .55rem; border: 1px solid var(--w-ln); border-radius: 4px; font: 500 .68rem/1.25 var(--w-mono); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#case .wx.l { justify-content: flex-start; text-align: left; }
#case .wx.tall { min-height: 2.9rem; }
#case .wx.sm { align-self: flex-start; padding-inline: .8rem; }
#case .wx.sq { flex: none !important; width: 2.6rem; }
#case .wx.fill { background: var(--ink); border-color: var(--ink); color: var(--cs-card); font-weight: 600; }
#case .wx.bare { border: 0; min-height: 0; font-weight: 600; color: var(--ink); }
#case .wr { display: flex; gap: .4rem; } #case .wr > * { flex: 1 1 0; }
#case .wr > .grow { flex: 3 1 0; }
#case .wc { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
#case .wg { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
@media (max-width: 700px) { #case .dw .wx { white-space: normal; font-size: .62rem; padding: .3rem .35rem; } #case .dw-cell { min-width: 0; } }

/* ---------- homepage structure: number · section · wireframe, one row each ---------- */
#case .dw-url { margin: 0 0 .9rem; font: 500 .75rem/1.3 var(--w-mono); color: var(--muted); }
#case .dw-list { list-style: none; margin: 0; padding: 0; }
#case .dw-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "n tx cell"; column-gap: 1.4rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--w-ln2); }
#case .dw-n { grid-area: n; font: 500 .8rem/1 var(--w-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
#case .dw-tx { grid-area: tx; } #case .dw-cell { grid-area: cell; }
#case .dw-tx b { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
#case .dw-tx em { display: block; margin-top: .15rem; font-style: normal; font-size: .85rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 700px) {
  #case .dw-row { grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "n tx" ". cell"; row-gap: .6rem; align-items: start; }
  #case .dw-n { padding-top: .2rem; }
}

/* ---------- sitemap ---------- */
#case .dsm { text-align: center; }
#case .dsm-root, #case .dsm-node { display: inline-block; padding: .45rem 1rem; border: 1px solid var(--w-ln); border-radius: 4px; font-size: .9rem; font-weight: 600; color: var(--ink); background: var(--cs-card); }
#case .dsm-root { background: var(--ink); border-color: var(--ink); color: var(--cs-card); }
#case .dsm-kids { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 1.2rem; position: relative; }
#case .dsm-kids::before { content: ""; position: absolute; top: -1.2rem; left: 50%; height: 1.2rem; border-left: 1px solid var(--w-ln); }
#case .dsm-col { position: relative; padding-top: 1.2rem; }
#case .dsm-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--w-ln); }
#case .dsm-col:first-child::before { left: 50%; } #case .dsm-col:last-child::before { right: 50%; }
#case .dsm-col::after { content: ""; position: absolute; top: 0; left: 50%; height: 1.2rem; border-left: 1px solid var(--w-ln); }
#case .dsm-col ul { list-style: none; margin: .6rem auto 0; padding: 0; width: max-content; max-width: 100%; text-align: left; }
#case .dsm-col li { padding: .2rem 0 .2rem .7rem; border-left: 1px solid var(--w-ln); font-size: .82rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 700px) {
  #case .dsm { text-align: left; }
  #case .dsm-kids { grid-template-columns: 1fr; margin: .8rem 0 0 .9rem; border-left: 1px solid var(--w-ln); }
  #case .dsm-kids::before, #case .dsm-col::after { display: none; }
  #case .dsm-col { padding: .4rem 0 .4rem 1rem; } #case .dsm-col::before { left: 0 !important; right: auto !important; top: 1.2rem; width: .8rem; }
  #case .dsm-col ul { margin-left: 0; }
}

/* ---------- key screens: three phone outlines ---------- */
#case .dph-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); max-width: 46rem; margin: 0 auto; }
@media (max-width: 640px) { #case .dph-row { grid-template-columns: minmax(0, 15rem); justify-content: center; } }
#case .dph-p { margin: 0; }
#case .dph-f { position: relative; aspect-ratio: 9 / 17; display: flex; flex-direction: column; gap: .45rem; padding: 1.6rem .7rem .7rem; border: 1.5px solid var(--w-ln); border-radius: 6px; }
#case .dph-f::before { content: ""; position: absolute; top: .65rem; left: 50%; width: 2.2rem; height: 3px; transform: translateX(-50%); border-radius: 2px; background: var(--w-ln); }
#case .dph-f .end { margin-top: auto; }
#case .ph-ok { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: .6rem auto 0; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 1.1rem; color: var(--ink); }
#case .dph-p figcaption { display: grid; grid-template-columns: 1.8rem 1fr; padding-top: .8rem; font-size: .85rem; line-height: 1.45; color: var(--muted); text-align: left; }
#case .dph-p figcaption strong { color: var(--ink); font-weight: 600; }
#case .dph-n { font: 500 .78rem/1.85 var(--w-mono); color: var(--muted); }

/* ---------- journey ---------- */
#case .dj-list { list-style: none; margin: 0; padding: 0; }
#case .dj-st { position: relative; padding: 0 0 1.6rem 2.8rem; }
#case .dj-st::before { content: ""; position: absolute; left: .95rem; top: 2.1rem; bottom: .3rem; border-left: 1px solid var(--w-ln); }
#case .dj-st:last-child { padding-bottom: 0; } #case .dj-st:last-child::before { display: none; }
#case .dj-st.is-after::before { border-left-style: dashed; }
#case .dj-n, #case .dj-bn { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--w-ln); border-radius: 50%; background: var(--cs-card); font: 500 .74rem/1 var(--w-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
#case .dj-n { position: absolute; left: 0; top: 0; }
#case .is-after > .dj-n, #case .dj-b.is-after .dj-bn { border-style: dashed; }
#case .dj-hd { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; min-height: 1.9rem; margin-bottom: .9rem; }
#case .dj-hd h3 { margin: 0; font-size: 1.15rem !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--ink) !important; }
#case .dj-tag { padding: .15rem .5rem; border: 1px solid var(--w-ln); border-radius: 4px; font: 500 .66rem/1.4 var(--w-mono); text-transform: uppercase; color: var(--muted); }
#case .dj-tag--conv { border-color: var(--ink); color: var(--ink); }
#case .dj-grid { display: grid; gap: 0 1.6rem; margin: 0; }
@media (min-width: 700px) { #case .dj-grid { grid-template-columns: 1fr 1fr; } #case .dj-grid > .dj-q { grid-column: 1 / -1; } }
#case .dj-grid > div { padding: .8rem 0; border-top: 1px solid var(--w-ln2); }
#case .dj-grid > .dj-q { padding-top: 0; border-top: 0; }
#case .dj-grid dt { margin-bottom: .3rem; font: 500 .68rem/1.3 var(--w-mono); text-transform: uppercase; color: var(--muted); }
#case .dj-grid dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
#case .dj-grid .dj-q dd { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.3; }
#case .dj-rail, #case .dj-nav { display: none; }
#case .dj button:focus-visible { outline: 2px solid var(--focus, #E8490F); outline-offset: 3px; }
/* wide screens with JS: rail of 9 equal columns, one stage shown below */
@media (min-width: 900px) {
  #case .dj.is-step .dj-rail { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0 0 1.8rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--w-ln2); position: relative; }
  #case .dj.is-step .dj-rail::before { content: ""; position: absolute; left: calc(100% / 18); right: calc(100% / 18); top: 2.95rem; border-top: 1px solid var(--w-ln); }
  #case .dj-zone { grid-row: 1; margin: 0 .3rem 1rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ink); font: 500 .68rem/1.3 var(--w-mono); text-transform: uppercase; color: var(--ink); text-align: left; }
  #case .dj-zone.is-after { border-bottom-style: dashed; color: var(--muted); border-color: var(--muted); }
  #case .dj-b { grid-row: 2; }
  #case .dj-b { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .55rem; min-height: 44px; padding: 0 .2rem; border: 0; background: none; color: var(--muted); cursor: pointer; text-align: center; }
  #case .dj-bn { position: relative; z-index: 1; transition: background .2s, color .2s, border-color .2s; }
  #case .dj-bt { font-size: .8rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
  #case .dj-b.done .dj-bn { border-color: var(--ink); }
  #case .dj-b:hover { color: var(--ink); }
  #case .dj-b.on { color: var(--ink); } #case .dj-b.on .dj-bt { font-weight: 600; }
  #case .dj-b.on .dj-bn { background: var(--ink); border-color: var(--ink); color: var(--cs-card); }
  #case .dj.is-step .dj-st { display: none; padding: 0; }
  #case .dj.is-step .dj-st::before { display: none; }
  #case .dj.is-step .dj-st.on { display: block; animation: djIn .3s ease-out; }
  #case .dj.is-step .dj-n { position: static; }
  #case .dj.is-step .dj-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--w-ln2); }
  #case .dj-nav button { min-height: 40px; padding: .45rem .9rem; border: 1px solid var(--w-ln); border-radius: 6px; background: none; color: var(--ink); font: 500 .85rem/1 inherit; cursor: pointer; }
  #case .dj-nav .dj-next { margin-left: auto; order: 3; }
  #case .dj-nav button:hover:not(:disabled) { border-color: var(--ink); }
  #case .dj-nav button:disabled { opacity: .35; cursor: default; }
  #case .dj-status { margin: 0 0 0 .4rem; font-size: .82rem; color: var(--muted); }
}
@keyframes djIn { from { opacity: 0; } to { opacity: 1; } }

/* one gentle reveal; final state without JS or with reduced motion */
#case :is(.dw, .dsm, .dph).xa :is(.dw-row, .dsm-col, .dph-p) { opacity: 0; transform: translateY(8px); }
#case :is(.dw, .dsm, .dph).xa.in :is(.dw-row, .dsm-col, .dph-p) { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: calc(var(--i) * 60ms); }
@media (prefers-reduced-motion: reduce) {
  #case :is(.dw, .dsm, .dph, .dj) *, #case :is(.dw, .dsm, .dph, .dj) *::before { animation: none !important; transition: none !important; }
}

/* narrow figure (opt-in: img block with narrow: true), e.g. portrait photos */
#case .cs-body .st-fig.st-fig--narrow { max-width: min(100%, 24rem) !important; margin-inline: 0; }
#case .cs-body .st-fig.st-fig--narrow img { width: 100% !important; height: auto !important; max-height: 65vh; object-fit: cover; }

/* mobile screenshots: near-square corners everywhere in case studies */
#case .st-phone .scr, #case .case-hero.is-phone, #case .case-hero.is-phone img { border-radius: 10px !important; }
#case .st-phone .scr img, #case .st-phone .scr > * { border-radius: 6px !important; }