/* Behind the Build case-study landing page. Depends on /home.css for tokens + .btn. */

:root {
  --on-surface-slate: #414751;
  --danger: #dc2626;
}

/* --- minimal nav --- */
.cs-navwrap { position: relative; z-index: 50; background: var(--background); padding: 24px var(--gutter) 0; }
.cs-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 14px 28px 14px 24px;
  background: var(--glass); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-full); box-shadow: var(--shadow-ambient);
}
.cs-nav .brand { display: flex; align-items: center; gap: 10px; color: var(--on-surface-strong); }
.cs-nav .brand img { height: 28px; }
.cs-nav .brand span { font-weight: 700; font-size: 22px; letter-spacing: -.05em; }
.cs-issue { font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-surface-muted); }

/* --- hero --- */
.cs-hero { position: relative; overflow: hidden; background: var(--background); }
.cs-hero::before {
  content: ''; position: absolute; top: -180px; right: -160px; width: 640px; height: 640px;
  border-radius: 50%; background: var(--gradient-soft); filter: blur(40px); pointer-events: none;
}
.cs-hero-inner {
  position: relative; padding: 88px var(--gutter) 96px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center;
}
.cs-hero-copy { display: flex; flex-direction: column; gap: 26px; }
.cs-badge {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  background: var(--primary-10); border-radius: var(--radius-full); padding: 9px 18px;
  font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary);
}
.cs-hero h1 { font-weight: 800; font-size: 64px; line-height: 1.02; letter-spacing: -.045em; text-wrap: pretty; }
.cs-hero h1 .grad-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-lede { font-size: 19px; line-height: 1.65; color: var(--on-surface-variant); max-width: 560px; text-wrap: pretty; }
.cs-lede strong { color: var(--on-surface-strong); }
.cs-ticks { display: flex; flex-direction: column; gap: 12px; }
.cs-ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--on-surface-variant); }
.cs-ticks .material-symbols-rounded { font-size: 20px; color: var(--primary); flex: none; }
.cs-ticks ul, .cs-ticks { list-style: none; margin: 0; padding: 0; }

/* --- form card --- */
.cs-form-col { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 110px; }
.cs-card {
  background: var(--surface-container-lowest); border-radius: var(--radius-lg);
  padding: 40px 36px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 18px;
}
.cs-card h2 { font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.cs-card-intro { font-size: 14.5px; line-height: 1.6; color: var(--on-surface-variant); }
.cs-card form { display: flex; flex-direction: column; gap: 18px; }
.cs-field { display: flex; flex-direction: column; gap: 7px; }
.cs-field label { font-weight: 700; font-size: 13px; color: var(--on-surface-strong); }
.cs-field input {
  font-family: var(--font-body); font-size: 15px; color: var(--on-surface);
  background: var(--surface-container); border: 0; outline: 0;
  border-radius: var(--radius-sm); padding: 15px 16px; width: 100%;
}
.cs-field input::placeholder { color: var(--on-surface-variant); }
.cs-field input:focus { box-shadow: none; }
.cs-field input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.cs-error { font-size: 13px; font-weight: 600; color: var(--danger); }
.cs-submit { width: 100%; padding: 18px 32px; font-size: 16px; }
.cs-note { font-size: 12.5px; line-height: 1.55; color: var(--on-surface-variant); text-align: center; }
.cs-meta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--on-surface-muted); }
.cs-meta span { display: flex; align-items: center; gap: 7px; }
.cs-meta .material-symbols-rounded { font-size: 18px; color: var(--primary); }

.cs-done { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 22px 4px; }
.cs-done .tick {
  width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-primary);
}
.cs-done .tick .material-symbols-rounded { font-size: 32px; color: #fff; }
.cs-done h3 { font-weight: 800; font-size: 24px; letter-spacing: -.03em; }
.cs-done p { font-size: 15px; line-height: 1.65; color: var(--on-surface-variant); max-width: 320px; }
.cs-done p strong { color: var(--on-surface-strong); }
.cs-done .btn { width: 100%; padding: 16px 28px; font-size: 15px; }
.cs-done .cs-talk { font-weight: 700; font-size: 14px; }

/* --- diagnostic --- */
.cs-signs { background: var(--surface-container-low); padding: 96px var(--gutter); }
.cs-signs-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.cs-signs-head .eyebrow { color: var(--primary); font-size: 13px; }
.cs-signs-head h2 { font-weight: 800; font-size: 46px; line-height: 1.08; letter-spacing: -.04em; text-wrap: pretty; }
.cs-signs-head p { font-size: 17px; line-height: 1.65; color: var(--on-surface-variant); text-wrap: pretty; }
.cs-sign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0 0 32px; padding: 0; }
.cs-sign-grid li {
  background: var(--surface-container-lowest); border-radius: var(--radius-md);
  padding: 28px 26px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-ambient);
  font-weight: 600; font-size: 15.5px; line-height: 1.55; color: var(--on-surface-slate);
}
.cs-sign-grid .material-symbols-rounded { font-size: 24px; color: var(--primary); flex: none; margin-top: 1px; }
.cs-signs-foot { font-size: 16px; color: var(--on-surface-variant); }
.cs-signs-foot a { font-weight: 700; }

/* --- dark chapters band --- */
.cs-inside { background: var(--surface-dark); padding: 100px var(--gutter); }
.cs-inside-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.cs-inside-intro { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 40px; }
.cs-inside-intro h2 { font-weight: 800; font-size: 46px; line-height: 1.08; letter-spacing: -.04em; color: var(--on-dark); text-wrap: pretty; }
.cs-inside-intro p { font-size: 17px; line-height: 1.7; color: var(--on-dark-variant); text-wrap: pretty; }
.cs-glass { background: rgba(255,255,255,.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-md); }
.cs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; list-style: none; padding: 0; }
.cs-stats li { padding: 22px 20px; display: flex; flex-direction: column; gap: 4px; }
.cs-stats b { font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -.03em; color: var(--on-dark); }
.cs-stats span { font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-variant); }
.cs-chapters { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.cs-chapters li { padding: 26px 30px; display: flex; gap: 24px; align-items: flex-start; }
.cs-chapters .num { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .1em; color: var(--secondary-cyan); flex: none; margin-top: 3px; }
.cs-chapters h3 { font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--on-dark); margin-bottom: 5px; }
.cs-chapters p { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-variant); text-wrap: pretty; }

/* --- who wrote it --- */
.cs-author { background: var(--background); padding: 96px var(--gutter); }
.cs-author-grid { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.cs-author-card { display: flex; flex-direction: column; gap: 14px; background: var(--surface-container); border-radius: var(--radius-lg); padding: 38px 34px; }
.cs-author-card img { height: 36px; align-self: flex-start; }
.cs-author-card b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--on-surface-strong); }
.cs-author-card p { font-size: 14.5px; line-height: 1.65; color: var(--on-surface-variant); }
.cs-author-card .sig { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-surface-variant); }
.cs-author-card .clutch-badge { margin-top: 6px; }
.cs-form-col > .clutch-badge { align-self: center; }
.cs-author-copy { display: flex; flex-direction: column; gap: 18px; }
.cs-author-copy .eyebrow { color: var(--primary); font-size: 13px; }
.cs-author-copy h2 { font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -.04em; text-wrap: pretty; }
.cs-author-copy p { font-size: 16.5px; line-height: 1.7; color: var(--on-surface-variant); text-wrap: pretty; }

/* --- final CTA --- */
.cs-cta-wrap { background: var(--surface-container-low); padding: 64px max(24px, calc((100% - 1360px) / 2)); }
.cs-cta {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--gradient-brand); box-shadow: var(--shadow-float);
  padding: 88px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.cs-cta .eyebrow { color: var(--secondary-sky); font-size: 14px; }
.cs-cta h2 { font-weight: 700; font-size: 54px; line-height: 1.05; letter-spacing: -.045em; color: #fff; max-width: 860px; text-wrap: pretty; }
.cs-cta .btn { padding: 20px 42px; font-size: 18px; background: #fff; color: var(--primary); box-shadow: var(--shadow-float); }
.cs-cta .btn:hover { color: var(--primary); }
.cs-cta > p { color: var(--on-dark-variant); font-size: 15px; }

@media (max-width: 980px) {
  .cs-hero-inner { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; padding-bottom: 64px; }
  .cs-hero h1 { font-size: 44px; }
  .cs-lede { font-size: 17px; }
  .cs-signs, .cs-inside, .cs-author { padding-top: 64px; padding-bottom: 64px; }
  .cs-sign-grid { grid-template-columns: 1fr; }
  .cs-inside-grid, .cs-author-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-inside-intro { position: static; }
  .cs-signs-head h2, .cs-inside-intro h2 { font-size: 34px; }
  .cs-author-copy h2 { font-size: 30px; }
  .cs-cta { padding: 56px 24px; }
  .cs-cta h2 { font-size: 34px; }
}
@media (max-width: 560px) {
  .cs-nav { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .cs-issue { font-size: 10.5px; }
  .cs-hero h1 { font-size: 36px; }
  .cs-card { padding: 28px 22px; }
  .cs-stats { grid-template-columns: 1fr; }
  .cs-chapters li { padding: 22px; gap: 16px; }
}