/* Lindqvist Medical sample case study — page styles.
   Built on identity/tokens.css. Only --hs-* tokens (and --brand-name for the
   reseller token) are read here: no hex, no font name. Re-skin in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--hs-color-bg);
  color: var(--hs-color-text);
  font-family: var(--hs-font-body);
  font-weight: var(--hs-weight-body);
  font-size: var(--hs-text-body);
  line-height: var(--hs-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--hs-space-4); top: -4rem; background: var(--hs-color-dark); color: var(--hs-color-text-on-dark); padding: var(--hs-space-2) var(--hs-space-3); z-index: 10; }
.skip:focus { top: var(--hs-space-2); }
:focus-visible { outline: var(--hs-rule-strong) solid var(--hs-color-accent); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(var(--hs-grid-max) + 2 * var(--hs-grid-margin));
  margin-inline: auto;
  padding-inline: var(--hs-grid-margin);
}

/* ---------- Shared pieces ---------- */
.label {
  font-family: var(--hs-font-mono);
  font-weight: var(--hs-weight-label);
  font-size: var(--hs-text-label);
  letter-spacing: var(--hs-tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.sample-flag {
  font-family: var(--hs-sample-font);
  font-weight: var(--hs-sample-weight);
  font-size: var(--hs-sample-size);
  letter-spacing: var(--hs-sample-tracking-sentence);
  text-transform: var(--hs-sample-transform);
  line-height: var(--hs-sample-leading);
  color: var(--hs-sample-text);
  background: var(--hs-sample-bg);
  border-left: var(--hs-sample-bar-w) solid var(--hs-sample-bar);
  padding: var(--hs-sample-pad);
  border-radius: 0 var(--hs-radius-1) var(--hs-radius-1) 0;
}
.layer { display: grid; gap: var(--hs-layer-gap); width: 100%; max-width: 8rem; }
.layer i { display: block; height: var(--hs-rule-hair); background: var(--hs-layer-ink); }
.layer i:first-child { height: var(--hs-layer-bar); width: var(--hs-layer-accent-w); background: var(--hs-layer-accent); }

.reseller::before {
  content: var(--brand-name);
  font-family: var(--hs-font-display);
  font-weight: var(--hs-weight-strong);
  letter-spacing: var(--hs-tracking-heading);
}

/* ---------- Masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 5;
  background: var(--hs-color-bg);
  border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule);
}
.masthead__row { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
.masthead__logo img { height: var(--hs-logo-height); width: auto; }
.masthead__cta {
  font-family: var(--hs-font-mono); font-weight: var(--hs-weight-label);
  font-size: var(--hs-text-label); letter-spacing: var(--hs-tracking-label); text-transform: uppercase;
  text-decoration: none; padding: var(--hs-space-2) var(--hs-space-3);
  border: var(--hs-rule-hair) solid var(--hs-color-rule-strong); border-radius: var(--hs-radius-1);
  transition: background var(--hs-dur-fast) var(--hs-ease-standard), color var(--hs-dur-fast) var(--hs-ease-standard);
}
.masthead__cta:hover { background: var(--hs-color-dark); color: var(--hs-color-text-on-dark); }

/* ---------- Hero ---------- */
.hero { padding-top: var(--hs-space-6); padding-bottom: var(--hs-space-7); }
.hero__kicker { color: var(--hs-color-text-muted); }
.hero__flag { margin-top: var(--hs-space-4); max-width: 46rem; }
.hero__title {
  margin-top: var(--hs-space-6);
  font-family: var(--hs-font-display); font-weight: var(--hs-weight-display);
  font-size: var(--hs-text-display); line-height: var(--hs-leading-tight);
  letter-spacing: var(--hs-tracking-display);
  max-width: 17ch; text-wrap: balance;
}
.hero__dek {
  margin-top: var(--hs-space-5);
  font-size: var(--hs-text-lead); line-height: 1.45; color: var(--hs-color-text-muted);
  max-width: var(--hs-measure-narrow);
}

.stats {
  margin-top: var(--hs-space-7);
  border-top: var(--hs-rule-strong) solid var(--hs-color-rule-strong);
  display: grid; grid-template-columns: 1fr;
}
.stat {
  display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; column-gap: var(--hs-space-4);
  padding-block: var(--hs-space-4);
  border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule);
}
.stat__fig {
  font-family: var(--hs-figure-font); font-weight: var(--hs-figure-weight);
  letter-spacing: var(--hs-figure-tracking); color: var(--hs-figure-color);
  font-size: var(--hs-text-h1); line-height: var(--hs-leading-tight);
  font-variant-numeric: tabular-nums;
}
.stat__unit { color: var(--hs-figure-unit-color); font-size: 0.5em; letter-spacing: 0; margin-left: 0.08em; }
.stat__cap { font-size: var(--hs-text-small); line-height: 1.4; color: var(--hs-color-text-muted); }
.stat--lead { grid-template-columns: 1fr; padding-block: var(--hs-space-5) var(--hs-space-4); }
.stat--lead .stat__was { color: var(--hs-color-data-before); text-decoration: line-through; text-decoration-thickness: 1px; }
.stat--lead .stat__fig { font-size: var(--hs-text-figure); margin-top: var(--hs-space-1); }
.stat--lead .stat__unit { font-size: 0.6em; margin: 0 0.18em 0 0; vertical-align: 0.06em; }
.stat--lead .stat__cap { margin-top: var(--hs-space-2); }

/* Media blocks (figures) */
.shot { margin-top: var(--hs-space-7); }
.shot__frame { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hs-color-surface); border-radius: var(--hs-radius-1); }
.shot__frame img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption, .duo figcaption { margin-top: var(--hs-space-3); font-size: var(--hs-text-small); color: var(--hs-color-text-muted); max-width: var(--hs-measure-narrow); line-height: 1.45; }
.shot figcaption .label, .duo figcaption .label { display: block; color: var(--hs-color-text); margin-bottom: var(--hs-space-1); }
.figband { padding-bottom: 0; }
.figband + .figband { padding-top: var(--hs-space-8); }
.figband .shot { margin-top: 0; }
.duo { display: grid; gap: var(--hs-space-6); }
.duo .shot { margin-top: 0; }
.shot__frame.ar-16x9 { aspect-ratio: 16 / 9; }
.shot__frame.ar-3x2  { aspect-ratio: 1600 / 1066; }
.shot__frame.ar-4x3  { aspect-ratio: 4 / 3; }
.shot__frame.ar-1x1  { aspect-ratio: 1 / 1; }
.shot__frame.ar-4x5  { aspect-ratio: 4 / 5; }
.shot--hero { margin-top: var(--hs-space-7); }

/* ---------- At a glance ---------- */
.glance { background: var(--hs-color-surface); padding-block: var(--hs-space-7); }
.glance__h { color: var(--hs-color-text-accent); }
.glance__list { margin-top: var(--hs-space-4); display: grid; }
.glance__list > div { padding-block: var(--hs-space-3); border-top: var(--hs-rule-hair) solid var(--hs-color-rule); }
.glance__list dt { color: var(--hs-color-text-muted); }
.glance__list dd { margin-top: var(--hs-space-1); font-size: var(--hs-text-body); line-height: 1.4; }

/* ---------- Story parts ---------- */
.part { padding-block: var(--hs-space-section); }
.part__head .layer { margin-bottom: var(--hs-space-5); }
.part__num { color: var(--hs-color-text-accent); }
.part__title {
  margin-top: var(--hs-space-2);
  font-family: var(--hs-font-display); font-weight: var(--hs-weight-display);
  font-size: var(--hs-text-h2); line-height: var(--hs-leading-snug); letter-spacing: var(--hs-tracking-heading);
  text-wrap: balance;
}
.part__body { margin-top: var(--hs-space-6); }
.prose { max-width: var(--hs-measure); }
.prose > * + * { margin-top: var(--hs-space-4); }
.prose .lead, .part__body > .lead { font-size: var(--hs-text-lead); line-height: 1.45; }
.prose h3 {
  margin-top: var(--hs-space-7);
  font-family: var(--hs-font-display); font-weight: var(--hs-weight-display);
  font-size: var(--hs-text-h3); line-height: var(--hs-leading-snug); letter-spacing: var(--hs-tracking-heading);
}
.prose h3 + p { margin-top: var(--hs-space-3); }
.prose strong { font-weight: var(--hs-weight-body-strong); }

.quote { margin-block: var(--hs-space-7) !important; padding-left: var(--hs-space-5); border-left: var(--hs-rule-strong) solid var(--hs-color-accent); }
.quote p {
  font-family: var(--hs-font-display); font-weight: var(--hs-weight-display);
  font-size: var(--hs-text-h3); line-height: 1.3; letter-spacing: var(--hs-tracking-heading);
}
.quote footer { margin-top: var(--hs-space-3); font-size: var(--hs-text-small); color: var(--hs-color-text-muted); }
.quote cite { font-style: normal; font-weight: var(--hs-weight-body-strong); color: var(--hs-color-text); }

.specs { display: grid; gap: 0; }
.specs > li { padding-block: var(--hs-space-5); border-top: var(--hs-rule-hair) solid var(--hs-color-rule); }
.specs > li:last-child { border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule); }
.specs__h { color: var(--hs-color-text-muted); margin-bottom: var(--hs-space-2); }
.specs strong { font-weight: var(--hs-weight-body-strong); }
.materials { display: grid; gap: var(--hs-space-3); }
.materials dt { font-weight: var(--hs-weight-body-strong); }
.materials dd { margin: 0; color: var(--hs-color-text-muted); }

.fixtures { display: grid; }
.fixtures li { position: relative; padding: var(--hs-space-3) 0 var(--hs-space-3) var(--hs-space-6); border-top: var(--hs-rule-hair) solid var(--hs-color-rule); }
.fixtures li:last-child { border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule); }
.fixtures li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--hs-space-3) + 0.62em);
  width: var(--hs-space-4); height: var(--hs-layer-bar); background: var(--hs-color-accent);
}
.fixtures strong { font-weight: var(--hs-weight-body-strong); }

/* ---------- Results: before / after ---------- */
.ba { margin-top: var(--hs-space-6); border-top: var(--hs-rule-strong) solid var(--hs-color-rule-strong); }
.ba__head { display: none; }
.ba__row {
  display: grid; grid-template-columns: 1fr 1.25fr; column-gap: var(--hs-space-4); row-gap: var(--hs-space-1);
  padding-block: var(--hs-space-4); border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule);
}
.ba__m { grid-column: 1 / -1; font-family: var(--hs-font-mono); font-weight: var(--hs-weight-label); font-size: var(--hs-text-label); letter-spacing: var(--hs-tracking-label); text-transform: uppercase; color: var(--hs-color-text-muted); }
.ba__b, .ba__a { font-family: var(--hs-font-display); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ba__b { color: var(--hs-color-data-before); font-weight: var(--hs-weight-display); font-size: var(--hs-text-lead); }
.ba__a { color: var(--hs-color-text); font-weight: var(--hs-weight-strong); font-size: var(--hs-text-lead); }
.ba__b::before, .ba__a::before { display: block; font-family: var(--hs-font-mono); font-weight: var(--hs-weight-label); font-size: 0.625rem; letter-spacing: var(--hs-tracking-label); text-transform: uppercase; margin-bottom: var(--hs-space-1); }
.ba__b::before { content: "Before"; color: var(--hs-color-text-muted); }
.ba__a::before { content: "After"; color: var(--hs-color-text-accent); }
.ba__a { position: relative; }
.ba__note { margin-top: var(--hs-space-3); font-size: var(--hs-text-small); font-style: italic; color: var(--hs-color-text-muted); }

.results { margin-top: var(--hs-space-7); display: grid; }
.results li { padding-block: var(--hs-space-4); border-top: var(--hs-rule-hair) solid var(--hs-color-rule); margin: 0 !important; }
.results li:last-child { border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule); }
.results strong { font-weight: var(--hs-weight-body-strong); display: block; }

/* ---------- Pull quotes band ---------- */
.voices { background: var(--hs-color-bg); color: var(--hs-color-text); padding-block: var(--hs-space-section); }
.voices__grid { display: grid; gap: var(--hs-space-8); }
.pull .layer { margin-bottom: var(--hs-space-5); }
.pull blockquote p {
  font-family: var(--hs-font-display); font-weight: var(--hs-weight-display);
  font-size: var(--hs-text-h2); line-height: var(--hs-leading-snug); letter-spacing: var(--hs-tracking-heading);
  text-wrap: pretty;
}
.pull figcaption { margin-top: var(--hs-space-5); display: grid; gap: var(--hs-space-1); }
.pull__name { font-weight: var(--hs-weight-body-strong); }
.pull figcaption .label { color: var(--hs-color-text-muted); }

/* ---------- CTA ---------- */
.talk { padding-block: var(--hs-space-section); border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule); }
.talk__grid { display: grid; gap: var(--hs-space-6); }
.talk__title {
  font-family: var(--hs-font-display); font-weight: var(--hs-weight-display);
  font-size: var(--hs-text-h1); line-height: var(--hs-leading-snug); letter-spacing: var(--hs-tracking-display);
  max-width: 18ch;
}
.talk__mark { display: inline-block; height: 0.82em; width: auto; vertical-align: -0.1em; margin-inline: 0.06em -0.12em; }
.button {
  appearance: none; cursor: pointer;
  font-family: var(--hs-font-body); font-weight: var(--hs-weight-body-strong); font-size: var(--hs-text-body);
  color: var(--hs-color-text-on-accent); background: var(--hs-color-accent);
  border: 0; border-radius: var(--hs-radius-1);
  padding: var(--hs-space-4) var(--hs-space-6); min-height: 3.25rem; width: 100%;
  transition: background var(--hs-dur-fast) var(--hs-ease-standard);
}
.button:hover { background: var(--hs-color-text-accent); color: var(--hs-color-text-on-dark); }
.talk__note { margin-top: var(--hs-space-3); font-size: var(--hs-text-small); color: var(--hs-color-text-muted); max-width: var(--hs-measure-narrow); }

/* ---------- Footer ---------- */
.foot { background: var(--hs-color-bg); color: var(--hs-color-text); padding-block: var(--hs-space-8) var(--hs-space-7); padding-bottom: max(var(--hs-space-7), env(safe-area-inset-bottom)); }
.foot__grid { display: grid; gap: var(--hs-space-5); }
.foot__logo { height: var(--hs-logo-height); width: auto; }
.foot__flag { max-width: 46rem; }
.foot__small { font-size: var(--hs-text-small); color: var(--hs-color-text-muted); max-width: var(--hs-measure); }
.foot__top { text-decoration: none; color: var(--hs-color-text-muted); }
.foot__top:hover { color: var(--hs-color-text); }

/* ======================================================================
   TABLET  ≥ 640px
   ====================================================================== */
@media (min-width: 640px) {
  .hero { padding-top: var(--hs-space-8); }
  .stats { grid-template-columns: repeat(3, 1fr); column-gap: var(--hs-grid-gutter); }
  .stat { grid-template-columns: 1fr; align-content: start; }
  .stat__cap { margin-top: var(--hs-space-2); }
  .stat--lead { grid-column: 1 / -1; }
  .glance__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--hs-grid-gutter); }
  .duo { grid-template-columns: repeat(2, 1fr); gap: var(--hs-grid-gutter); align-items: start; }
  .duo--3-2 { grid-template-columns: 3fr 2fr; }
  .duo--5-3 { grid-template-columns: 5fr 3fr; }
  .talk__act { max-width: 20rem; }
  .button { width: auto; }

  .ba__head { display: grid; grid-template-columns: 2fr 1fr 1fr; column-gap: var(--hs-space-4); padding-block: var(--hs-space-3); border-bottom: var(--hs-rule-hair) solid var(--hs-color-rule); }
  .ba__before-h { color: var(--hs-color-text-muted); }
  .ba__after-h { color: var(--hs-color-text-accent); }
  .ba__row { grid-template-columns: 1.5fr 1fr 1.2fr; align-items: baseline; }
  .ba__head { grid-template-columns: 1.5fr 1fr 1.2fr; }
  .ba__a { font-size: var(--hs-text-h3); }
  .ba__m { grid-column: auto; font-family: var(--hs-font-body); font-weight: var(--hs-weight-body); font-size: var(--hs-text-body); letter-spacing: 0; text-transform: none; color: var(--hs-color-text); }
  .ba__b::before, .ba__a::before { content: none; }
}

/* ======================================================================
   DESKTOP  ≥ 1024px  — the 12-column face
   ====================================================================== */
@media (min-width: 1024px) {
  .hero { padding-top: var(--hs-space-9); padding-bottom: var(--hs-space-8); }
  .hero .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--hs-grid-gutter); }
  .hero .wrap > * { grid-column: 1 / -1; }
  .hero .hero__title { grid-column: 1 / span 10; max-width: 18ch; }
  .hero .hero__dek { grid-column: 1 / span 6; }
  .hero .hero__flag { grid-column: 1 / span 7; }
  .stats { grid-template-columns: 1.5fr repeat(3, 1fr); }
  .stat--lead { grid-column: auto; padding-block: var(--hs-space-5); }
  .stat { padding-block: var(--hs-space-5); padding-right: var(--hs-space-4); }
  .stat + .stat { border-left: var(--hs-rule-hair) solid var(--hs-color-rule); padding-left: var(--hs-space-5); }
  .stat--lead .stat__fig { font-size: var(--hs-text-display); }

  .glance__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--hs-grid-gutter); }
  .glance__h { grid-column: 1 / span 3; padding-top: var(--hs-space-3); }
  .glance__list { grid-column: 4 / -1; margin-top: 0; grid-template-columns: repeat(3, 1fr); }
  .glance__list > div:nth-child(3) { grid-column: span 1; }

  .part__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--hs-grid-gutter); }
  .part__head { grid-column: 1 / span 3; align-self: start; position: sticky; top: 5.5rem; }
  .part__body { grid-column: 4 / span 8; margin-top: 0; padding-left: var(--hs-space-5); }
  .part--results .part__body { grid-column: 4 / -1; }
  .part--results .results { columns: 2; column-gap: var(--hs-grid-gutter); display: block; max-width: none; }
  .part--results .results li { break-inside: avoid; border-bottom: 0; }

  .voices__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--hs-space-8); }
  .talk__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--hs-grid-gutter); align-items: end; }
  .talk__title { grid-column: 1 / span 8; }
  .talk__act { grid-column: 9 / -1; justify-self: end; text-align: left; }

  .foot__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--hs-grid-gutter); align-items: start; }
  .foot__logo { grid-column: 1 / span 3; }
  .foot__flag { grid-column: 4 / span 6; }
  .foot__small { grid-column: 4 / span 6; }
  .foot__top { grid-column: 10 / -1; justify-self: end; grid-row: 1; }
}