/* /case-studies: the item-33 figures, HS-NDA-01, the pattern in numbers, the case files (rail + reads), the calculator index */

/* item 33: the lead figure, then three, then the one disclaimer line (the homepage arrangement) */
.cs-lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;padding-bottom:26px}
.cs-lead-n{font-family:var(--f-head);font-weight:450;font-size:96px;line-height:.95;letter-spacing:-.02em;color:var(--head)}
.cs-lead-l{flex:1 1 20em;max-width:30em;font:500 19px/1.5 var(--f-sans);color:var(--head)}
.cs-figs dt{font-weight:500;color:var(--body);text-wrap:pretty}
.cs-up{display:inline-block;font:600 22px/1 var(--f-sans);letter-spacing:.01em;color:var(--acc);vertical-align:.55em;margin-right:.1em}
.cs-up::first-letter{text-transform:uppercase}
/* the three figures stay inside their columns on tablets and at 200% zoom (audit F13: the % of 99.99% was cut at 768) */
@media (max-width:999px){.cs-figs dd{font-size:clamp(30px,4.6vw,54px)}.cs-up{font-size:16px}}
@media (max-width:899px){.cs-figs{--n:1!important;row-gap:24px}.cs-figs dd{font-size:48px}}
.cs-disc{margin-top:28px;font:500 16px/1.5 var(--f-sans);color:var(--label)}

/* HS-NDA-01 */
.cs-lane+.cs-lane{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule)}
.cs-lane-h{margin-bottom:12px}
.cs-items{flex:0 0 auto;display:grid;align-content:center;gap:8px;min-width:170px}
.cs-items li{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:6px;border:1px solid var(--nd-bd);background:var(--nd-bg);font:600 14.5px/1.3 var(--f-sans);color:var(--head)}
.cs-items .cs-ill{border-color:var(--seal);color:var(--seal)}
.cs-bar{display:inline-flex;gap:3px;flex:none}
.cs-bar b{display:block;width:14px;height:10px;border-radius:2px;background:var(--head)}
.cs-bar b:nth-child(2n){width:22px}
.cs-bad{border-color:var(--warn);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--warn) 9%,transparent) 0 1.5px,transparent 1.5px 9px),var(--nd-bg)}
.cs-brief .nd-t{margin-top:4px}
.cs-rel{margin-top:10px;display:grid;gap:6px}
.cs-rel li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.45;color:var(--body)}
.cs-rel li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--seal)}
.cs-tc{flex:0 0 150px!important;border-color:var(--ok)}
.cs-nda .chain>.cx{min-width:64px}
.tblock .cs-seal{color:var(--seal)}
.tblock .cs-seal::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px}

/* the pattern, in numbers */
.cs-pat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--rule)}
.cs-cell{padding-top:24px}
.cs-n{font-family:var(--f-head);font-weight:450;font-size:44px;line-height:1.05;letter-spacing:-.01em;color:var(--head)}
.cs-n .u{font:600 17px/1 var(--f-sans);letter-spacing:.02em;color:var(--acc);margin-left:.15em}
.cs-l{margin-top:12px;font:600 16px/1.4 var(--f-sans);color:var(--head)}
.cs-t{display:inline-flex;align-items:center;gap:7px;margin-left:10px;font:500 14px/1.3 var(--f-sans);color:var(--label);white-space:nowrap}
.cs-l .cs-t{display:flex;margin:8px 0 0}
.cs-t::before,.cs-key li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--seal)}
.cs-t.c::before,.cs-key .c::before{background:var(--warn)}
.cs-t.b::before,.cs-key .b::before,.cs-t.live::before{background:var(--ok)}
.cs-key{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px;padding-top:16px;border-top:1px solid var(--rule)}
.cs-key li{display:flex;align-items:center;gap:9px;font:600 14px/1.3 var(--f-sans);color:var(--head)}
.cs-foot{margin-top:14px;padding-top:0;border-top:0}

/* the case files */
.cs-file .sh-l{letter-spacing:.06em;font-variant-numeric:tabular-nums}
.cs-vert{font:600 15px/1.35 var(--f-sans);color:var(--head);text-wrap:balance}
.cs-client{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;font:500 14px/1.3 var(--f-sans);color:var(--label)}
.cs-client .cs-bar b{background:var(--head);opacity:.85}
.cs-ndat{padding:3px 7px;border-radius:4px;background:var(--head);color:var(--bg);font:700 14px/1 var(--f-sans);letter-spacing:.04em}
.cs-rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.cs-rail::before{content:"";position:absolute;left:12px;right:12px;top:22px;height:1.5px;background:var(--rule)}
.cs-rail details{position:relative;height:100%}
.cs-rail summary{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding-right:6px;cursor:pointer;list-style:none;font:600 15.5px/1.3 var(--f-sans);color:var(--head)}
.cs-rail summary::-webkit-details-marker{display:none}
.cs-rail summary:hover{text-decoration:underline;text-underline-offset:4px}
.cs-pip{flex:none;width:18px;height:18px;margin-left:3px;border-radius:50%;border:1.5px solid var(--seal);background:var(--bg);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 9px var(--seal)}
.cs-pip.ok{border-color:var(--ok);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 9px var(--ok)}
.cs-sn{font:600 14px/1 var(--f-sans);color:var(--label);font-variant-numeric:tabular-nums}
.cs-rail details[open] summary{color:var(--acc)}
.cs-pop{margin-top:6px;padding:12px 14px 13px;border-radius:8px;background:var(--plate);border:1px solid var(--plate-bd);font-size:15.5px;line-height:1.5;color:var(--body)}
.cs-pk{display:block;margin-bottom:4px;font:600 14px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.cs-body{margin-top:36px}
.cs-h{margin-top:28px;font:600 14px/1.3 var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
.cs-list{margin-top:12px;border-top:1px solid var(--rule)}
.cs-list li{position:relative;padding:12px 0 13px 22px;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
.cs-list li::before{content:"";position:absolute;left:2px;top:1.35em;width:8px;height:1.5px;background:var(--acc)}
.cs-list strong{color:var(--head);font-weight:600}
.cs-reads{display:grid;align-content:start;border-top:2px solid var(--head)}
.cs-read{padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.cs-read .n{font-family:var(--f-head);font-weight:450;font-size:40px;line-height:1.05;letter-spacing:-.01em;color:var(--head)}
.cs-read .n.cs-word{font-size:34px}
.cs-read .l{margin-top:6px;font:500 16.5px/1.45 var(--f-sans);color:var(--head);text-wrap:pretty}
.cs-read .cs-t{display:flex;margin:8px 0 0}

/* the constants */
.cs-const{margin-top:0}
.cs-quote{margin-top:48px}
.cs-quote p{font-family:var(--f-head);font-weight:450;font-size:34px;line-height:1.25;letter-spacing:-.01em}

/* the calculator index (id="estimators") */
.cs-calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;border-top:1px solid var(--rule)}
.cs-calc a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;height:100%;padding:16px 0 18px;border-bottom:1px solid var(--rule);text-decoration:none}
.cs-calc .cat{grid-column:1;font:600 14px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--acc)}
.cs-calc .nm{grid-column:1;font:600 17px/1.35 var(--f-sans);color:var(--head);text-wrap:balance}
.cs-calc .go{grid-column:2;grid-row:1 / span 2;align-self:center;display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--f-sans);color:var(--label)}
.cs-calc .go svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;transition:transform .2s var(--ease)}
.cs-calc a:hover .nm{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cs-calc a:hover .go{color:var(--head)}
.cs-calc a:hover .go svg{transform:translateX(3px)}

@media (max-width:1199px){
  .cs-pat{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
  .cs-calc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-lead-n{font-size:80px}
}
@container (max-width:620px){
  .cs-items{min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-start}
  .cs-tc{flex:1 1 auto!important}
}
@media (max-width:699px){
  .cs-lead-n{font-size:64px}
  .cs-lead-l{font-size:17px}
  .cs-up{font-size:17px}
  .cs-pat{grid-template-columns:1fr}
  .cs-n{font-size:40px}
  .cs-client{justify-content:flex-start}
  .cs-rail{grid-template-columns:1fr;gap:4px}
  .cs-rail::before{left:12px;right:auto;top:14px;bottom:14px;width:1.5px;height:auto}
  .cs-calc{grid-template-columns:1fr}
  .cs-quote p{font-size:27px}
}
.cs-idrow{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.cs-idrow>span{display:block}
.cs-idrow .cs-client{display:flex}
@media (max-width:699px){
  .cs-idrow{align-items:flex-start;text-align:left;gap:6px}
  .cs-pre{display:flex;flex-direction:column}
  .cs-pre .sh-r{order:1}
}
/* wide: one step open at a time, its note in a full-width slot under the rail (no ragged gap beside it) */
@media (min-width:700px){
  .cs-rail{padding-bottom:100px}
  .cs-rail details{position:static}
  .cs-rail .cs-pop{position:absolute;left:0;right:0;top:54px;margin:0}
  .cs-pat{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .cs-n{white-space:nowrap}
  .cs-calc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* cell 4: the figure carries its own "by design" tag (source drawing label "0 · by design"), printed once, in the key colour */
.cs-n .u.cs-ub{color:var(--ok)}

/* release port (SEO-15): the calculator names are <h3> again; the heading defaults they would inherit are undone */
.cs-calc h3.nm{letter-spacing:normal}
/* release port: the calculator cards keep the live site's 3px keyboard focus ring (tests/estimators-integrity.test.mjs) */
.cs-calc a:focus-visible{outline-width:3px}