/* Smoking Snapshot case study. Loaded after site.css and case.css.
   Concept: the page reads like a Snapshot. The big number first, then how it adds up.
   Two signature pieces: the phone that walks through the flow as you read, and the day by day chart
   where Pride stands out. Everything else is quiet text and screens. Pink is the only accent. */

.sn-case { --ink-soft: color-mix(in srgb, var(--ink) 15%, transparent); }

/* ───────── Hero ───────── */
.sn-hero-copy { grid-column: 1 / span 6; }
.sn-hero-copy .lede { grid-column: auto; }
.sn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.sn-pill { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 400; white-space: nowrap;
  color: var(--ink-2); background: var(--glass-strong); border: 1px solid var(--glass-line); transition: color .3s var(--ease), border-color .3s var(--ease), box-shadow .5s var(--ease); }
.sn-pill svg { width: 12px; height: 12px; flex: none; transition: transform .4s var(--ease); }
.sn-pill:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.sn-pill.is-primary { color: var(--bg); background: var(--ink); border-color: transparent; box-shadow: 0 8px 22px rgba(10, 10, 10, .14); }
.sn-pill.is-primary:hover { box-shadow: 0 14px 36px rgba(10, 10, 10, .22); }
.sn-pill.is-primary:hover svg { transform: translate(1px, -1px); }
.sn-pill:not(.is-primary):hover svg { transform: translateY(2px); }

/* ───────── Stage: the result on an iPad, the start on a phone ───────── */
.sn-stage .card { aspect-ratio: 16 / 10; max-height: 88svh; }
.sn-stage .media { position: absolute; inset: 0; }
.sn-stage-ipad { width: 72%; left: 5%; top: 11%; border-radius: 22px; transform: rotate(-2deg); }
.sn-stage-phone { position: absolute; z-index: 2; height: 82%; width: auto; left: 70%; top: 9%; transform: rotate(3deg);
  filter: drop-shadow(0 34px 50px rgba(30, 0, 90, .32)); transition: transform 1.2s var(--ease); will-change: transform; }
.item.is-hot .sn-stage-ipad { transform: rotate(-3deg) translate3d(-2%, -2%, 0); }
.item.is-hot .sn-stage-phone { transform: rotate(4.5deg) translate3d(3%, 2%, 0); }

/* ───────── The numbers, then the answers ───────── */
.sn-stats { margin-top: clamp(60px, 7vw, 96px); }
.sn-stats .stats { margin-top: 0; padding-top: 0; grid-template-columns: repeat(4, auto); }
.sn-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 32px; margin-top: clamp(70px, 8vw, 110px); }
.sn-answers .point p, .sn-learned .point p { max-width: 38ch; }

/* ───────── How it works: the phone holds still and changes screen with the step you're reading ───────── */
.sn-flow { margin-top: clamp(120px, 14vw, 200px); }
.sn-flow-head h2, .sn-head h2 { font-family: var(--serif); font-weight: 300; letter-spacing: var(--track-heading); text-wrap: balance; }
.sn-flow-head h2 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.06; }
.sn-flow-head p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.sn-flow-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 100px); }
.sn-steps { list-style: none; padding-bottom: 12svh; }
.sn-step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .7s var(--ease); }
.sn-step.is-on { opacity: 1; }
.sn-step-n { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1; color: var(--tone); }
.sn-step h3 { margin-top: 16px; max-width: 16ch; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3vw, 46px); line-height: 1.06; letter-spacing: var(--track-heading); text-wrap: balance; }
.sn-step p:not(.sn-step-n) { margin-top: 18px; max-width: 40ch; font-size: 18px; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.sn-step-shot { display: none; }

.sn-phone-wrap { position: sticky; top: 0; align-self: start; height: 100svh; display: grid; place-items: center; isolation: isolate; }
.sn-phone-wrap::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(620px, 120%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 30%, transparent), color-mix(in srgb, #3a17e0 12%, transparent) 55%, transparent); }
.sn-phone { position: relative; width: min(330px, 25vw, calc((100svh - 150px) * 720 / 1558)); aspect-ratio: 720 / 1558; padding: 9px; border-radius: 50px; background: #0b0b0d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 40px 80px rgba(30, 0, 90, .28), 0 12px 24px rgba(10, 10, 10, .12); }
.sn-phone::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 20px; width: 30%; height: 22px; translate: -50% 0; border-radius: 99px; background: #0b0b0d; }
.sn-phone img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: cover; object-position: top; border-radius: 41px;
  opacity: 0; scale: 1.015; transition: opacity .45s var(--ease), scale .8s var(--ease); }
.sn-phone img.is-on { opacity: 1; scale: 1; }
[data-theme="dark"] .sn-phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 90px rgba(0, 0, 0, .6); }

/* ───────── The story: a rail beside the chapters ───────── */
.sn-story { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 100px); margin-top: clamp(110px, 13vw, 190px); scroll-margin-top: 90px; }
.sn-rail { position: sticky; top: 104px; align-self: start; }
.sn-rail .label { margin-bottom: 14px; }
.sn-rail ol { list-style: none; }
.sn-rail a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0 7px 14px; border-left: 1px solid var(--hair); font-size: 14px; font-weight: 400; line-height: 1.35;
  color: var(--whisper); transition: color .3s var(--ease), border-color .3s var(--ease); }
.sn-rail a span { font-size: 12px; white-space: nowrap; opacity: .8; }
.sn-rail a:hover { color: var(--ink-2); }
.sn-rail a.is-on { color: var(--ink); border-left: 2px solid var(--tone); padding-left: 13px; }

.sn-chapters { min-width: 0; }
.sn-ch { scroll-margin-top: 100px; }
.sn-ch + .sn-ch { margin-top: clamp(120px, 13vw, 190px); }
.sn-when { font-size: 13px; font-weight: 400; color: var(--whisper); margin-bottom: 14px; }
.sn-head h2 { max-width: 20ch; font-size: clamp(38px, 4vw, 62px); line-height: 1.04; }
.sn-prose { margin-top: 30px; }
.sn-prose p { max-width: 62ch; font-size: 18px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.sn-prose p + p { margin-top: 18px; }
.sn-prose code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .86em; padding: 2px 7px; border-radius: 7px; color: var(--ink); background: var(--surface); }
.sn-fig { margin: 50px 0 0; }
.sn-fig + .sn-prose, .sn-pair + .sn-prose, .sn-photos + .sn-days, .sn-days + .sn-prose, .sn-list + .sn-fig, .sn-wall + .sn-list { margin-top: 50px; }
.sn-fig figcaption, .sn-photo figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--whisper); max-width: 70ch; }
.sn-fig .shot img { display: block; }
.sn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; }
.sn-pair .sn-fig { margin-top: 0; }
.sn-pair.is-phone-pair { align-items: end; }
.sn-fig .shot.is-phone { padding-top: 0; }
.sn-fig .shot.is-phone img { border-radius: 34px; max-height: 620px; }

/* Lists of checks and fixes */
.sn-list { margin-top: 44px; }
.sn-list .label { margin-bottom: 14px; }
.sn-list ul { list-style: none; }
.sn-list li { position: relative; padding: 15px 0 15px 26px; border-top: 1px solid var(--hair); font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.sn-list li:last-child { border-bottom: 1px solid var(--hair); }
.sn-list li::before { content: ""; position: absolute; left: 2px; top: 1.4em; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }

/* The save point result, set like one of the product's big numbers */
.sn-callout { margin-top: 56px; padding: 34px 0 0 30px; border-left: 2px solid var(--tone); }
.sn-callout .label { margin-bottom: 10px; }
.sn-callout-line { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.06; letter-spacing: var(--track-heading); }
.sn-callout p:last-child { margin-top: 16px; max-width: 56ch; font-size: 17px; line-height: 1.62; color: var(--ink-2); }

/* ───────── Event photos. Empty frames hold the space until the photos arrive ───────── */
.sn-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; margin-top: 50px; }
.sn-photo { margin: 0; }
.sn-photo.is-wide { grid-column: 1 / -1; }
.sn-photo .shot { aspect-ratio: 4 / 3; }
.sn-photo.is-wide .shot { aspect-ratio: 16 / 9; }
.sn-photo .shot img { width: 100%; height: 100%; object-fit: cover; }
.sn-photo-empty { display: grid; place-items: center; width: 100%; height: 100%;
  background: radial-gradient(55% 70% at 26% 78%, color-mix(in srgb, var(--tone) 15%, transparent), transparent 72%),
              radial-gradient(50% 60% at 82% 18%, color-mix(in srgb, #3a17e0 11%, transparent), transparent 72%), var(--surface); }
.sn-photo-empty span { font-size: 13px; font-weight: 400; color: var(--whisper); }
.sn-photo.is-empty .shot { box-shadow: 0 0 0 1px var(--hair); }

/* ───────── Snapshots per day. One series, so one colour: grey for the days, pink for the ones the story is about ───────── */
.sn-days { margin: 0; }
.sn-days-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
.sn-days-head h3, .sn-block h3 { font-size: 18px; font-weight: 400; line-height: 1.35; }
.sn-days-head p { font-size: 13px; color: var(--whisper); }
.sn-days-plot { position: relative; height: clamp(240px, 26vw, 330px); margin-top: 22px; }
.sn-days-grid span { position: absolute; left: 0; right: 0; bottom: calc(var(--y) / var(--max, 140) * 100%); border-top: 1px solid var(--hair); }
.sn-days-grid span::after { content: attr(data-y); position: absolute; right: 0; bottom: 4px; font-size: 11px; color: var(--whisper); font-variant-numeric: tabular-nums; }
.sn-days-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.sn-day { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sn-day i { width: min(100%, 22px); height: calc(var(--v) / var(--max, 140) * 100%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--ink-soft);
  transform-origin: 50% 100%; transition: background-color .3s var(--ease); }
.sn-day.is-mark i { background: var(--tone); }
.sn-day.is-hover i { background: color-mix(in srgb, var(--ink) 34%, transparent); }
.sn-day.is-mark.is-hover i { background: color-mix(in srgb, var(--tone) 80%, var(--ink)); }
.js .sn-days .sn-day i { transform: scaleY(0); transition: transform 1.1s var(--ease), background-color .3s var(--ease); transition-delay: calc(var(--i) * 14ms + .15s), 0s; }
.js .sn-days.in .sn-day i { transform: scaleY(1); }
.sn-day-label { position: absolute; bottom: calc(var(--v) / var(--max, 140) * 100% + 10px); left: 50%; translate: -50% 0; white-space: nowrap; text-align: center; pointer-events: none;
  font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.sn-day-label b { display: block; font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.1; color: var(--ink); }
.sn-day-label.is-start { left: 0; translate: 0 0; text-align: left; }
.sn-day-label .sn-s { display: none; }
.sn-day-label.is-end { left: auto; right: 0; translate: 0 0; text-align: right; }
.sn-days-marker { position: absolute; top: 0; bottom: 0; border-left: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); pointer-events: none; }
.sn-days-marker span { position: absolute; top: 0; left: 8px; white-space: nowrap; font-size: 12px; line-height: 1.35; color: var(--whisper); }
.sn-days-axis { position: relative; height: 30px; margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.sn-days-axis span { position: absolute; top: 8px; translate: -50% 0; font-size: 12px; color: var(--whisper); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sn-days-axis span:first-child { translate: 0 0; }
.sn-days-tip { position: absolute; z-index: 2; left: 0; top: 0; padding: 8px 12px; border-radius: 12px; pointer-events: none; white-space: nowrap;
  font-size: 12px; line-height: 1.45; color: var(--ink-2); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; translate: -50% -100%; transition: opacity .25s var(--ease); }
.sn-days-tip.is-on { opacity: 1; }
.sn-days-tip b { display: block; font-weight: 500; color: var(--ink); }
.sn-days figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--whisper); max-width: 70ch; }

.sn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ───────── How it performed ───────── */
.sn-block { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--hair); }
.sn-block .sn-prose { margin-top: 26px; }
.sn-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--whisper); max-width: 70ch; }

.sn-bars { list-style: none; margin-top: 22px; }
.sn-bars li { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 56px; align-items: center; gap: 18px; padding: 11px 0; border-top: 1px solid var(--hair); }
.sn-bars li:last-child { border-bottom: 1px solid var(--hair); }
.sn-bar-name { font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.sn-bar { position: relative; height: 10px; }
.sn-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: max(4px, calc(var(--v) / 593 * 100%)); border-radius: 0 4px 4px 0; background: var(--tone); transform-origin: 0 50%; }
.js .sn-block .sn-bar i { transform: scaleX(0); transition: transform 1.1s var(--ease) .15s; }
.js .sn-block.in .sn-bar i { transform: scaleX(1); }
.sn-bar-num { text-align: right; font-size: 15px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.sn-table { width: 100%; max-width: 720px; margin-top: 30px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.sn-table caption { text-align: left; padding-bottom: 12px; }
.sn-table th, .sn-table td { padding: 11px 0; border-top: 1px solid var(--hair); text-align: right; font-weight: 400; color: var(--ink-2); }
.sn-table thead th { font-size: 13px; color: var(--whisper); border-top: 0; }
.sn-table :is(th, td):first-child { text-align: left; }
.sn-table tbody th { color: var(--ink); }
.sn-table tr.is-total :is(th, td) { color: var(--ink); border-top-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.sn-table tbody tr:last-child :is(th, td) { border-bottom: 1px solid var(--hair); }

.sn-meters { list-style: none; margin-top: 22px; }
.sn-meters li { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: end; gap: 10px 28px; padding: 22px 0; border-top: 1px solid var(--hair); }
.sn-meters li:last-child { border-bottom: 1px solid var(--hair); }
.sn-meter-num { font-family: var(--serif); font-weight: 200; font-size: clamp(46px, 4.6vw, 68px); line-height: .9; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.sn-meter-what { font-size: 17px; line-height: 1.45; color: var(--ink); }
.sn-meter-base { margin-top: 2px; font-size: 13px; color: var(--whisper); }
.sn-meter { position: relative; display: block; height: 6px; margin-top: 14px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.sn-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 1%); border-radius: 6px; background: var(--tone); transform-origin: 0 50%; }
.js .sn-block .sn-meter i { transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.js .sn-block.in .sn-meter i { transform: scaleX(1); }

.sn-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 40px; margin-top: 26px; }
.sn-who .stat .what { max-width: 24ch; }

/* The final report */
.sn-wall { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.sn-wall .shot { border-radius: 14px; }
.sn-wall img { aspect-ratio: 16 / 9; object-fit: cover; }

/* What I learned */
.sn-learned { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; margin-top: 40px; }
.sn-learned .point h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2vw, 30px); letter-spacing: var(--track-title); }

/* ───────── Call to action: the live site leads, email is the quiet one ───────── */
.sn-case .cs-cta .copy { gap: 10px; }

/* ───────── Responsive ───────── */
@media (max-width: 1180px) {
  .sn-story { grid-template-columns: minmax(0, 1fr); }
  .sn-rail { display: none; }
  .sn-stats .stats { grid-template-columns: repeat(2, auto); gap: 30px 60px; }
}
@media (max-width: 1040px) {
  .sn-hero-copy { grid-column: 1 / -1; }
  .sn-answers { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* No pinned phone on small screens. Each step carries its own screen. */
  .sn-flow-body { grid-template-columns: minmax(0, 1fr); }
  .sn-phone-wrap { display: none; }
  .sn-steps { padding-bottom: 0; }
  .sn-step { min-height: 0; opacity: 1; margin-top: 64px; }
  .sn-step-shot { display: block; width: min(300px, 76vw); height: auto; margin-top: 28px; border-radius: 30px;
    box-shadow: 0 0 0 7px #0b0b0d, 0 30px 60px rgba(30, 0, 90, .24); }
}
@media (max-width: 700px) {
  .sn-stage .card { aspect-ratio: 4 / 5; }
  .sn-stage-ipad { width: 150%; left: 6%; top: 8%; border-radius: 16px; }
  .sn-stage-phone { height: 64%; left: 38%; top: 30%; }
  .sn-pair, .sn-learned, .sn-photos { grid-template-columns: 1fr; }
  .sn-pair.is-phone-pair { align-items: start; }
  .sn-wall { grid-template-columns: 1fr 1fr; }
  .sn-who { grid-template-columns: 1fr 1fr; }
  .sn-bars li { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px 14px; }
  .sn-bar { grid-column: 1 / -1; grid-row: 2; }
  .sn-meters li { grid-template-columns: 1fr; }
  .sn-day-label { font-size: 11px; }
  .sn-day-label .sn-l { display: none; }
  .sn-day-label .sn-s { display: inline; }
  .sn-day-label b { font-size: 18px; }
  .sn-days-marker span { display: none; }
  .sn-callout { padding-left: 22px; }
  .sn-prose p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-step, .sn-phone img { transition: none; }
  .js .sn-days .sn-day i, .js .sn-block .sn-bar i, .js .sn-block .sn-meter i { transform: none; transition: none; }
}