/* Clean sheet — Pasciostyle white productivity feed
 * Canvas: 2000×2500 (IG 4:5). Preview scale 0.2 → 400×500.
 * Type: Inter Extra Bold / Black. Margins ~10–12%. No comic stroke.
 */

.slide.layout-clean,
.slide.layout-clean-compare,
.slide.layout-clean-grid9,
.slide.layout-clean-vs,
.slide.layout-clean-attn {
  background: #ffffff;
  color: #0a0a0a;
  overflow: hidden;
  font-family: 'Inter', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
}

.slide.layout-clean .grad,
.slide.layout-clean-compare .grad,
.slide.layout-clean-grid9 .grad,
.slide.layout-clean-vs .grad,
.slide.layout-clean-attn .grad {
  display: none;
}

/* ── CLEAN — centered bold statement ──
   Side pad 240 · type box 1520 wide · optically centered
*/
.clean-statement {
  position: absolute;
  left: 240px;
  top: 720px;
  width: 1520px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 148px;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #0a0a0a;
  text-align: center;
}

.clean-swipe {
  position: absolute;
  right: 160px;
  bottom: 120px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: #b0b0b0;
}

/* ── CLEAN_COMPARE — "Silence > Noise" ──
   Three columns, vertically centered
*/
.clean-compare-row {
  position: absolute;
  left: 160px;
  right: 160px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}

.clean-compare-side {
  flex: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 132px;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #0a0a0a;
  text-align: center;
}

.clean-compare-gt {
  flex: 0 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 160px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #0a0a0a;
}

/* ── CLEAN_GRID9 — 3×3 icon habits ──
   Title top 160 · grid from 480 · icons 280 · gap 64
*/
.clean-grid-title {
  position: absolute;
  left: 200px;
  top: 160px;
  width: 1600px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 112px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #0a0a0a;
  text-align: center;
}

.clean-grid9 {
  position: absolute;
  left: 200px;
  top: 480px;
  width: 1600px;
  display: grid;
  grid-template-columns: repeat(3, 280px);
  grid-template-rows: repeat(3, auto);
  column-gap: 140px;
  row-gap: 96px;
  justify-content: center;
}

.clean-grid9-cell {
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.clean-grid9-icon {
  width: 280px;
  height: 280px;
  border-radius: 64px;
  background: #f2f2f2;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.clean-grid9-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clean-grid9-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  text-align: center;
  width: 100%;
}

.clean-grid9-sub {
  margin-top: -12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #888;
  text-align: center;
  width: 100%;
}

/* ── CLEAN_VS — two equal rounded tiles, optically centered ──
   Title pinned top. Pair group centered in the remaining plate.
   Photo and icon use the SAME square + radius — never mix sharp photos
   with rounded app icons, and never leave a transparent empty frame.
*/
.clean-vs-title {
  position: absolute;
  left: 100px;
  top: 110px;
  width: 1800px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 88px;
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: #0a0a0a;
  text-align: center;
}

.clean-vs-stage {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 280px;
  bottom: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clean-vs-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 72px;
  width: 100%;
}

.clean-vs-col {
  width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.clean-vs-icon,
.clean-vs-icon.is-photo,
.clean-vs-col.is-photo .clean-vs-icon {
  width: 760px;
  height: 760px;
  border-radius: 168px;
  background: #f0f0f0;
  overflow: hidden;
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.clean-vs-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.clean-vs-icon.is-app img {
  object-fit: cover;
}

.clean-vs-letter {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 220px;
  letter-spacing: -0.06em;
  color: #111;
  background: linear-gradient(160deg, #f4f4f4 0%, #e4e4e4 100%);
}

.clean-vs-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 68px;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: #0a0a0a;
  text-align: center;
  max-width: 100%;
}

.clean-vs-meta {
  margin-top: -8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  text-align: center;
  max-width: 100%;
}

/* ── CLEAN_ATTN — left stack statement (attention-span cover) ──
   TikTok-safe inset ~9–17% · type ~248/800 · mute #757575 · no art
*/
.clean-attn-stack {
  position: absolute;
  left: 180px;
  right: 180px;
  top: 420px;
  bottom: 280px;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 248px;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: #0a0a0a;
}

.clean-attn-stack .mute,
.clean-attn-cta {
  color: #757575;
}

.clean-attn-stack .ink {
  color: #0a0a0a;
}

.clean-attn-stack .period {
  color: #757575;
}

.clean-attn-cta {
  margin-top: 72px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 72px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}