/* Case study layout, built on tokens.css and base.css. Three sizes only: heading, body, sub. */

.page { display: flex; flex-direction: column; align-items: center; width: 100%; overflow: clip; }

/* Nav: same rolling links as the home page */
.topnav { width: 100%; max-width: var(--max); padding: var(--s-12) var(--pad-x) 0; display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; gap: var(--s-12); }
.roll { display: inline-grid; text-decoration: underline; font-size: var(--fs-sub); line-height: var(--lh-sub); }
.roll > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity 0.3s var(--ease-link); }
.roll .rest { color: var(--secondary); font-weight: var(--w-regular); }
.roll .hover { color: var(--primary); font-weight: var(--w-semibold); opacity: 0; }
.roll:hover .rest, .roll:focus-visible .rest { opacity: 0; }
.roll:hover .hover, .roll:focus-visible .hover { opacity: 1; }
.roll-resume .hover { color: var(--accent); }

.content { width: 100%; max-width: var(--max); padding: var(--s-24) var(--pad-x) 12rem; display: flex; flex-direction: column; gap: var(--s-36); }
.block { display: flex; flex-direction: column; gap: var(--s-10); width: 100%; }
.text { display: flex; flex-direction: column; gap: var(--s-6); }
.body strong, .key strong { font-weight: var(--w-semibold); color: var(--primary); }
.body.key { color: var(--primary); }

/* Hero */
.hero { display: flex; flex-direction: column; gap: var(--s-6); }
.title { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--w-semibold); color: var(--primary); text-transform: lowercase; }
.meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.summary { max-width: 46rem; }
.hero .zoom { margin-top: var(--s-6); }

/* Images */
.zoom { width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); cursor: zoom-in; }
.cite { font-size: var(--fs-sub); font-weight: var(--w-semibold); color: var(--primary); text-decoration: underline; }
.cite:hover { color: var(--accent); }
.link-body { text-decoration: underline; color: var(--primary); font-weight: var(--w-semibold); }
.link-body:hover { color: var(--accent); }

/* Tables: grid on desktop and tablet, stacked cards on phone */
.table { display: flex; flex-direction: column; width: 100%; }
.thead, .tr { display: grid; grid-template-columns: 9rem 1fr 1fr 1.6fr; gap: var(--s-8); }
.table.cols3 .thead, .table.cols3 .tr { grid-template-columns: 1fr 1fr 1fr; }
.th { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); text-transform: lowercase; color: var(--secondary); padding-bottom: var(--s-3); border-bottom: 0.0625rem solid var(--line); }
.tr { padding: var(--s-6) 0; border-bottom: 0.0625rem solid var(--line); }
.td { font-size: var(--fs-body); line-height: var(--lh-body); min-width: 0; }
.td::before { content: attr(data-label); display: none; font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); text-transform: lowercase; color: var(--secondary); margin-bottom: var(--s-1); }
.group { padding-top: var(--s-10); }
.group + .tr { border-top: 0; }
.group:first-of-type { padding-top: var(--s-6); }

/* Toggles */
.toggle summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 3rem; }
.toggle summary::-webkit-details-marker { display: none; }
.toggle summary .label { color: var(--primary); }
.toggle summary:hover .label { color: var(--accent); text-decoration: underline; }
.toggle-body { display: flex; flex-direction: column; gap: var(--s-6); padding-top: var(--s-6); }
.toggle-body > .text { gap: var(--s-6); }

/* Research list */
.res-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); margin-top: var(--s-6); }
.res { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-6); background: var(--surface); border-radius: var(--radius); }
.res-tag { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); color: var(--secondary); }
.res-title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); color: var(--primary); text-decoration: underline; }
.res-text { font-size: var(--fs-sub); line-height: var(--lh-sub); }
.res:hover .res-title { color: var(--accent); }

/* Design thinking callout: green appears only here */
.dt { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--surface); border-radius: var(--radius); max-width: 46rem; }
.dt-label { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); text-transform: uppercase; color: var(--accent); }
.dt .body { max-width: none; }

/* Showcase of widgets and notifications */
.showcase { display: flex; flex-direction: column; gap: var(--s-6); margin-top: var(--s-6); }
.shots { display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: var(--s-8); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--s-6); }

/* How it works flow */
.flow-wrap { display: flex; flex-direction: column; gap: var(--s-4); }
.flow { display: flex; flex-direction: column; gap: var(--s-6); max-width: 40rem; }
.flow li { display: flex; flex-direction: column; gap: var(--s-1); padding-left: var(--s-6); border-left: 0.125rem solid var(--secondary); }
.flow li.you { border-left-color: var(--primary); }
.flow .body { max-width: none; }
.flow-group:last-child { order: 3; }

/* Topics inside a section */
.topic { display: flex; flex-direction: column; gap: var(--s-6); margin-top: var(--s-6); }
.tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.tests figure { display: flex; flex-direction: column; gap: var(--s-2); }
.cars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.cars .wide { grid-column: 1 / -1; }

/* References */
.refs { display: flex; flex-direction: column; gap: var(--s-3); max-width: 56rem; }
.refs a { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); color: var(--primary); text-decoration: underline; }
.refs a:hover { color: var(--accent); }
:target { scroll-margin-top: var(--s-12); }
.refs li:target a { color: var(--accent); }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(51, 51, 51, 0.92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; border-radius: var(--radius); background: var(--surface); }
.lb-close { position: absolute; top: var(--s-4); right: var(--s-4); min-height: 3rem; padding: var(--s-2) var(--s-4); border: 0.0625rem solid var(--bg); border-radius: var(--radius); background: transparent; color: var(--bg); font: var(--w-semibold) var(--fs-sub)/var(--lh-sub) var(--font); text-transform: lowercase; cursor: pointer; }
.lb-close:hover { background: var(--bg); color: var(--primary); }

/* Tablet */
@media (max-width: 89.99rem) {
  .topnav { padding-top: var(--s-8); }
  .content { padding-top: var(--s-20); gap: var(--s-24); padding-bottom: 8rem; }
  .thead, .tr { grid-template-columns: 7rem 1fr 1fr 1.4fr; gap: var(--s-6); }
  .shots { grid-template-columns: minmax(0, 14rem) 1fr; }
}

/* Phone */
@media (max-width: 50.56rem) {
  .topnav { padding-top: var(--s-6); }
  .nav-links { gap: var(--s-6); }
  .content { padding-top: var(--s-12); gap: var(--s-20); padding-bottom: 6rem; }
  .block { gap: var(--s-8); }
  .thead { display: none; }
  .tr, .table.cols3 .tr { grid-template-columns: 1fr; gap: var(--s-3); }
  .td::before { display: block; }
  .group { padding-top: var(--s-6); }
  .res-list { grid-template-columns: 1fr; gap: var(--s-4); }
  .shots { grid-template-columns: 1fr; }
  .shots .phone { max-width: 16rem; }
  .tests { grid-template-columns: 1fr; }
  .cars { grid-template-columns: 1fr; }
  .lb-close { top: var(--s-2); right: var(--s-2); }
}

/* ClarityLens additions */
.res-cards, .cases, .options, .protos { display: grid; gap: var(--s-8); }
.res-cards { grid-template-columns: repeat(3, 1fr); }
.res-card, .case, .option { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--surface); border-radius: var(--radius); }
.res-card .body, .case .body, .option .body { max-width: none; }
.cases { grid-template-columns: 1fr 1fr; }
.options { grid-template-columns: 1fr 1fr; }
.protos { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.demo { width: 100%; max-height: 30rem; border-radius: var(--radius); background: var(--surface); }
.steps { display: flex; flex-direction: column; gap: var(--s-2); }
.steps.numbered { counter-reset: s; }
.steps.numbered li { counter-increment: s; display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-2); max-width: none; }
.steps.numbered li::before { content: counter(s) "."; font-weight: var(--w-semibold); color: var(--primary); }
.table.cols2 .thead, .table.cols2 .tr { grid-template-columns: 9rem 1fr; }
.table.cols3 .tr.cmp { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 89.99rem) {
  .res-cards { grid-template-columns: 1fr; }
}
@media (max-width: 50.56rem) {
  .cases, .options, .protos { grid-template-columns: 1fr; }
  .table.cols2 .tr, .table.cols3 .tr.cmp { grid-template-columns: 1fr; }
}

/* DistroWatch additions */
.title { max-width: 40rem; }
.bullets { display: flex; flex-direction: column; gap: var(--s-2); }
.bullets li { position: relative; padding-left: var(--s-6); }
.bullets li::before { content: ""; position: absolute; left: var(--s-2); top: 0.8125rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--secondary); }
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
.cat { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-4); border-top: 0.0625rem solid var(--line); }
.cat .body { max-width: none; }
.lh-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.lh-box { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--surface); border-radius: var(--radius); }
.lh { font-size: var(--fs-body); color: var(--primary); }
.lh-tight { line-height: 1.15; }
.lh-loose { line-height: 1.5; }
.sw { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.chip { flex: none; width: 3.5rem; height: 1.75rem; border-radius: 0.375rem; border: 0.0625rem solid rgba(0, 0, 0, 0.12); }
.chip.big { width: 5rem; height: 3rem; }
.palette { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.table.contrast .thead, .table.contrast .tr { grid-template-columns: 0.6fr 1.2fr 1.2fr 1fr 0.8fr 1fr; gap: var(--s-4); }
.cmp-fig { display: flex; flex-direction: column; gap: var(--s-3); }
.cmp-fig .body { max-width: none; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.issues { display: flex; flex-direction: column; gap: var(--s-6); }
.issues li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-3); }
.issue-text { display: flex; flex-direction: column; gap: var(--s-1); }
.issue-text .body { max-width: 46rem; }
.fixes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-8); }
.fix { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 0.0625rem solid var(--line); }
.screens { display: flex; gap: var(--s-8); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s-4); }
.screen { flex: none; display: flex; flex-direction: column; gap: var(--s-3); scroll-snap-align: start; }
.screen .zoom { width: auto; height: 36rem; max-width: none; }
.screen figcaption span { font-weight: var(--w-regular); }

@media (max-width: 89.99rem) {
  .table.contrast .thead, .table.contrast .tr { grid-template-columns: 0.6fr 1.2fr 1.2fr 1fr 0.8fr 1fr; }
}
@media (max-width: 50.56rem) {
  .cats, .lh-demo, .pair { grid-template-columns: 1fr; }
  .table.contrast .tr { grid-template-columns: 1fr 1fr; }
  .screen .zoom { height: 28rem; }
}

/* ClarityLens, matched to the Framer page: flat, no filled cards, outlined boxes, green rule callout */
.cl .prim, .cl .body.prim { color: var(--primary); }
.cl .body strong { font-weight: var(--w-semibold); color: var(--primary); }
.cl h2.label, .cl .toggle summary .label { font-style: italic; }
.cl .meta.dots { gap: 0; }
.cl .meta.dots li { text-transform: none; letter-spacing: 0; color: var(--secondary); }
.cl .meta.dots li + li::before { content: "\2022"; margin: 0 var(--s-3); }
.cl .meta.dots .link-body { color: var(--secondary); }
.cl .hero .zoom { border-radius: 0; background: #fcfcfd; }
.cl .cite { font-size: inherit; font-weight: inherit; color: inherit; text-decoration: none; }
.cl .cite:hover { text-decoration: underline; color: var(--primary); }
.cl strong + .cite { font-weight: var(--w-semibold); }

.cl .toggle summary { display: flex; justify-content: space-between; width: 100%; }
.cl .plus { position: relative; width: 1rem; height: 1rem; margin-right: 0.125rem; color: var(--secondary); }
.cl .plus::before, .cl .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.0625rem; background: currentColor; }
.cl .plus::after { transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.cl .toggle[open] .plus::after { transform: rotate(0); }
.cl .toggle summary:hover .label { text-decoration: none; color: var(--primary); }
.cl .res-cards { grid-template-columns: 1fr; gap: 0; }
.cl .res-card { background: transparent; border-radius: 0; padding: var(--s-6) 0; border-top: 0.0625rem solid var(--line); gap: var(--s-2); }
.cl .res-card .body { color: var(--primary); }

.cl .cases { grid-template-columns: 1fr; gap: var(--s-12); }
.cl .case { background: transparent; padding: 0; border-radius: 0; gap: var(--s-6); }
.cl .case .body { max-width: 40rem; color: var(--primary); }
.cl .case-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.cl .case-tag { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); color: var(--primary); }
.cl .case-who { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); color: var(--secondary); }
.cl .ico { flex: none; }

.cl .demo { background: #000; max-height: 37.5rem; border-radius: 0; }
.cl .dt { background: transparent; border-radius: 0; padding: var(--s-1) 0 var(--s-1) var(--s-6); border-left: 0.125rem solid var(--accent); max-width: 40rem; gap: var(--s-3); }
.cl .dt-label { display: flex; align-items: center; gap: var(--s-2); text-transform: lowercase; color: var(--secondary); }
.cl .dt-label .ico { color: var(--accent); }
.cl .dt .body { color: var(--primary); }

.cl .flow { display: flex; align-items: stretch; gap: 0; max-width: none; flex-direction: row; }
.cl .flow li { padding: 0; border-left: 0; }
.cl .flow .step-box { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: center; padding: var(--s-6); border: 0.0625rem solid var(--line); border-radius: var(--radius); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--primary); }
.cl .flow.bold .step-box { font-weight: var(--w-semibold); }
.cl .step-arrow { flex: none; display: grid; place-items: center; width: 3.5rem; color: var(--secondary); }
.cl .options { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.cl .option { background: transparent; border-radius: var(--radius); border: 0.0625rem solid var(--line); padding: var(--s-6); gap: var(--s-4); }
.cl .options .option .body { max-width: none; }

.cl .levels { display: flex; flex-direction: column; max-width: 62rem; }
.cl .lv { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s-6); padding: var(--s-4) 0; align-items: baseline; }
.cl .lv.head { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); color: var(--secondary); padding-bottom: var(--s-6); }
.cl .lname { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--secondary); }
.cl .lv .body { max-width: none; }
.cl .note.prim { max-width: 40rem; }
.cl .note .cite { font-weight: var(--w-semibold); color: var(--primary); }
.cl .protos { gap: var(--s-4); }
.cl .protos .zoom { border-radius: 0; }
.cl .topic { margin-top: 0; }
.cl .block { gap: var(--s-12); }
.cl .topic .label { color: var(--secondary); }

.cl .refs { gap: var(--s-4); max-width: 40rem; }
.cl .refs li { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--primary); }
.cl .refs li strong { font-weight: var(--w-semibold); }
.cl .refs a { font-size: inherit; font-weight: var(--w-regular); color: var(--primary); text-decoration: underline; word-break: break-all; }

@media (max-width: 89.99rem) {
  .cl .flow .step-box { padding: var(--s-4); }
}
@media (max-width: 50.56rem) {
  .cl .flow { flex-direction: column; }
  .cl .step-arrow { width: auto; height: 2.5rem; }
  .cl .step-arrow .arr svg { transform: rotate(90deg); }
  .cl .options { grid-template-columns: 1fr; }
  .cl .lv { grid-template-columns: 1fr; gap: var(--s-1); }
  .cl .lv.head { display: none; }
  .cl .case-head { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .cl .protos { grid-template-columns: 1fr; }
}