/* Saggar Studio case-study pages. Tokens and components come from ../../../styles.css. */
:root { --paper: oklch(1 0 0); }
body { overflow-x: clip; }
a { color: inherit; }
a:hover { color: var(--signal); }
img { max-width: 100%; height: auto; }
.cs-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.cs-sec { padding: 112px 0; }
.cs-mono { font: 400 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; }
.cs-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); }
.cs-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.cs-crumbs a { text-decoration: none; }
.cs-crumbs a:hover { color: var(--ink); text-decoration: underline; }

.cs-hero { position: relative; overflow: hidden; padding: 40px 0 96px; }
.cs-hero__lines { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%; -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 90%); mask-image: linear-gradient(to bottom, black 10%, transparent 90%); }
.cs-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; align-items: end; margin-top: 72px; }
.cs-title { margin-top: 20px; font-size: clamp(3.5rem, 10vw, 9rem); line-height: .86; }
.cs-lede { margin: 32px 0 0; max-width: 38rem; font-size: var(--type-lead); line-height: 1.6; text-wrap: pretty; }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 36px; }
.cs-facts { margin: 0; border-top: 1px solid var(--line-strong); }
.cs-facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cs-facts dt { padding-top: 3px; color: var(--ink-soft); }
.cs-facts dd { margin: 0; font-size: var(--type-sm); line-height: 1.5; }

.cs-night { background: var(--night); color: var(--on-night); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cs-shot { margin: 0; }
.cs-shot .mx-frame { box-shadow: none; }
.cs-shot img { display: block; width: 100%; }
.cs-shot figcaption { margin-top: 16px; color: var(--on-night-faint); }
.cs-phones { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.cs-phones__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.cs-phones__pair img { display: block; width: 100%; border-radius: 4px; border: 1px solid var(--line-on-night-soft); }
.cs-stackshots { display: grid; gap: 32px; }

.cs-split { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; }
.cs-h2 { margin-top: 20px; font-size: clamp(2.25rem, 5vw, 4.5rem); }
.cs-prose p { margin: 0; max-width: 42rem; font-size: var(--type-lead); line-height: 1.6; text-wrap: pretty; }
.cs-prose p + p { margin-top: 20px; }
.cs-prose--muted p { color: var(--ink-soft); font-size: var(--type-base); }

.cs-features { margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.cs-feature { display: grid; grid-template-columns: 6rem minmax(0, .9fr) minmax(0, 1.4fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.cs-feature__n { margin: 0; font-family: var(--font-display); font-weight: 200; font-variation-settings: var(--display-variation); font-size: 3rem; line-height: 1; color: var(--signal); }
.cs-feature h3 { margin: 0; font: 600 var(--type-lead)/1.4 var(--font-sans); }
.cs-feature h3 + p { margin: 0; font-size: var(--type-base); line-height: var(--leading-relaxed); color: var(--ink-soft); text-wrap: pretty; }

.cs-band { background: var(--clay); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cs-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 56px 0 0; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.cs-numbers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 28px 24px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cs-numbers dt { color: var(--ink-soft); }
.cs-numbers dd { margin: 0; font-family: var(--font-display); font-weight: 200; font-variation-settings: var(--display-variation); font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.cs-note { margin: 20px 0 0; font: 400 12px/1.6 var(--font-mono); color: var(--ink-soft); }

.cs-table { width: 100%; margin-top: 56px; border-collapse: collapse; border-top: 1px solid var(--line-strong); }
.cs-table th, .cs-table td { padding: 18px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cs-table th { width: 15rem; padding-right: 32px; font: 400 11px/1.9 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); }
.cs-table td { font-size: var(--type-base); line-height: 1.6; }

.cs-faq .mx-faq__summary h3 { margin: 0; font: inherit; }

.cs-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 48px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); text-decoration: none; }
.cs-next__title { margin-top: 16px; font-size: clamp(2.5rem, 7vw, 6rem); line-height: .95; }
.cs-next__arrow { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; color: var(--signal); transition: transform var(--dur-fast) ease; }
.cs-next:hover { color: var(--ink); }
.cs-next:hover .cs-next__arrow { transform: translateX(8px); }

.cs-closing { background: var(--forest); color: var(--on-night); }
.cs-closing p { margin: 24px 0 0; max-width: 34rem; font-size: var(--type-base); line-height: 1.6; color: var(--on-night-muted); }
.cs-closing a:hover { color: inherit; }

@media (max-width: 1023px) {
  .cs-sec { padding: 80px 0; }
  .cs-hero__grid, .cs-split, .cs-phones { grid-template-columns: 1fr; gap: 48px; }
  .cs-feature { grid-template-columns: 4rem minmax(0, 1fr); }
  .cs-feature h3 + p { grid-column: 2; }
  .cs-numbers, .cs-numbers--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cs-wrap { padding: 0 20px; }
  .cs-sec { padding: 56px 0; }
  .cs-hero { padding: 24px 0 56px; }
  .cs-hero__grid { margin-top: 48px; }
  .cs-feature { grid-template-columns: 1fr; gap: 12px; }
  .cs-feature h3 + p { grid-column: auto; }
  .cs-table th, .cs-table td { display: block; width: auto; padding: 0; border: 0; }
  .cs-table th { padding-top: 16px; }
  .cs-table td { padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
  .cs-facts div { grid-template-columns: 1fr; gap: 4px; }
}