/* In-house product case studies (YoYoGTM, Porchlit, Mailhub). Extends case.css; every class is prefixed ih-. */

/* buy vs build: the yearly maths */
.ih-calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin: 0 0 1.6rem; padding: 1.1rem 1.4rem; border: var(--line); border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--yellow); font-family: var(--f-mono); }
.ih-calc span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.ih-calc b { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.01em; }
.ih-calc b em { font-style: normal; color: var(--yellow); }

.ih-cost { border: var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--ink); }
.ih-cost table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ih-cost th, .ih-cost td { padding: .8rem 1.1rem; text-align: left; border-bottom: 1.5px solid #e9e4d8; vertical-align: top; }
.ih-cost th { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: var(--cream); border-bottom: var(--line); }
.ih-cost td.ih-n, .ih-cost th.ih-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ih-cost td small { display: block; color: var(--ink-2); font-size: .8rem; margin-top: .15rem; }
.ih-cost tr.ih-ours td { background: #fff6cf; font-weight: 700; border-bottom: 0; }
.ih-cost tr.ih-ours td small { font-weight: 500; }
.ih-cost tr:last-child td { border-bottom: 0; }
.ih-src { margin-top: .9rem; color: var(--ink-2); font-size: .8rem; max-width: 90ch; }
.ih-src a { color: inherit; }
@media (max-width: 700px) {
  .ih-cost { overflow-x: auto; }
  .ih-cost table { min-width: 560px; }
}

/* why we built it instead of buying */
.ih-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin-top: 2rem; }
.ih-why div { padding: 1.2rem; border: var(--line); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.ih-why h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.ih-why p { color: var(--ink-2); font-size: .93rem; margin: 0; }

/* how it works, step by step */
.ih-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .8rem; counter-reset: ih; }
.ih-flow li { list-style: none; position: relative; padding: 1.1rem 1rem 1.1rem; border: var(--line); border-radius: 16px; background: #fff; box-shadow: 4px 4px 0 var(--ink); counter-increment: ih; }
.ih-flow li::before { content: counter(ih, decimal-leading-zero); display: inline-block; font-family: var(--f-mono); font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--yellow); margin-bottom: .6rem; }
.ih-flow b { display: block; font-size: 1rem; margin-bottom: .25rem; }
.ih-flow span { color: var(--ink-2); font-size: .88rem; line-height: 1.45; display: block; }
.ih-flow { padding: 0; margin: 0; }

/* the jobs this build proves we can do */
.ih-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.ih-job { padding: 1.2rem 1.25rem; border: var(--line); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.ih-job q { display: block; quotes: none; font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.ih-job p { margin: .55rem 0 0; color: var(--ink-2); font-size: .9rem; }
.ih-job .ih-k { display: inline-block; margin-bottom: .55rem; font-family: var(--f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .5rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--cream); }

/* small caption under a screenshot */
.ih-cap { margin: .6rem 0 0; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-2); letter-spacing: .02em; }

/* headline numbers inside a section */
.ih-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .8rem; margin: 0 0 1.8rem; }
.ih-nums div { padding: 1rem 1.1rem; border: var(--line); border-radius: 16px; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.ih-nums b { display: block; font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -.02em; line-height: 1.05; }
.ih-nums span { color: var(--ink-2); font-size: .86rem; }