/* Dumb Phone: full store screenshots paired with their feature explanations. */
.dumbphone-page { --dp-surface:#f6f7f2; --dp-line:#d9e0d2; }
.dumbphone-page .dp-hero { gap:clamp(32px,6vw,80px); padding-block:44px 56px; }
.dp-hero-copy { max-width:520px; }
.dumbphone-page .dp-hero h1 { margin:18px 0 16px; }
.dumbphone-page .dp-hero .catch { font-size:clamp(26px,3.2vw,36px); line-height:1.65; letter-spacing:.015em; }
.dp-hero-media { margin:0; padding:24px; display:grid; justify-items:center; border:1px solid var(--dp-line); border-radius:14px; background:var(--dp-surface); }
.dp-hero-media img { width:min(100%,310px); height:auto; border-radius:8px; }
.dp-hero-media figcaption { margin-top:14px; font-size:12px; color:var(--sub); }
.dp-overview { padding:32px 0 44px; border-top:1px solid var(--line); }
.dp-overview > h2 { margin:0 0 24px; font-size:24px; font-weight:600; line-height:1.65; }
.dp-feature-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dp-feature-link { padding:22px; border:1px solid var(--dp-line); border-radius:8px; text-decoration:none; transition:background-color .15s; }
.dp-feature-link:hover { background:var(--soft); }
.dp-feature-link strong { display:flex; justify-content:space-between; gap:12px; font-size:17px; font-weight:600; }
.dp-feature-link p { margin:10px 0 0; color:var(--sub); font-size:13px; line-height:1.9; }
.dp-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,7vw,88px); align-items:center; padding-block:52px; border-top:1px solid var(--line); scroll-margin-top:24px; }
.dp-feature-media { margin:0; padding:24px; background:var(--dp-surface); border:1px solid var(--dp-line); border-radius:14px; display:grid; justify-items:center; }
.dp-feature-media img { width:min(100%,340px); height:auto; border-radius:8px; }
.dp-feature-media figcaption { max-width:340px; margin-top:14px; color:var(--sub); font-size:12px; line-height:1.8; }
.dp-feature-copy { max-width:470px; }
.dp-feature-copy h2 { margin:0 0 22px; font-size:clamp(25px,3vw,34px); font-weight:600; line-height:1.65; letter-spacing:.01em; }
.dp-feature-copy > p:not(.label) { margin:0 0 24px; color:var(--sub); line-height:2; }
.dp-edit-steps { margin:28px 0 0; padding:0; list-style:none; counter-reset:edit-step; }
.dp-edit-steps li { counter-increment:edit-step; position:relative; padding:18px 0 18px 42px; border-top:1px solid var(--dp-line); }
.dp-edit-steps li::before { content:counter(edit-step); position:absolute; top:19px; left:0; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--soft); color:var(--green); font-size:12px; }
.dp-edit-steps strong { display:block; font-size:15px; font-weight:600; }
.dp-edit-steps span { display:block; margin-top:4px; color:var(--sub); font-size:13px; line-height:1.9; }
.dp-usage-list { margin:28px 0 0; }
.dp-usage-list div { padding-block:18px; border-top:1px solid var(--dp-line); }
.dp-usage-list dt { font-size:15px; font-weight:600; }
.dp-usage-list dd { margin:6px 0 0; font-size:14px; color:var(--sub); line-height:1.95; }
.dp-feature--usage .dp-feature-media { grid-column:2; grid-row:1; }
.dp-feature--usage .dp-feature-copy { grid-column:1; grid-row:1; }
.dp-download { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:32px; margin:16px 0 44px; background:var(--soft); border-radius:8px; }
.dp-download h2 { margin:0 0 8px; font-size:22px; font-weight:600; }
.dp-download p { margin:0; color:var(--sub); font-size:14px; }
.dp-download .button { flex:none; }
@media(max-width:800px) {
  .dp-feature-links { gap:12px; }
  .dp-feature-link { padding:18px 14px; }
  .dp-feature-link strong { font-size:15px; }
  .dp-hero-media, .dp-feature-media { padding:16px; }
}
@media(max-width:600px) {
  .dumbphone-page .dp-hero { padding-block:28px 36px; gap:28px; }
  .dp-hero-media { padding:16px; }
  .dp-hero-media img { width:min(100%,310px); }
  .dp-overview { padding-block:28px 32px; }
  .dp-overview > h2 { font-size:22px; }
  .dp-feature-links { grid-template-columns:minmax(0,1fr); }
  .dp-feature-link { padding:18px 20px; }
  .dp-feature-link strong { font-size:17px; }
  .dp-feature-link p { margin-top:6px; }
  .dp-feature { grid-template-columns:minmax(0,1fr); padding-block:32px; gap:24px; }
  .dp-feature-copy { max-width:none; grid-row:1; }
  .dp-feature-media { padding:16px; }
  .dp-feature-copy h2 { font-size:27px; margin-bottom:18px; }
  .dp-feature--usage .dp-feature-media { grid-column:auto; grid-row:auto; }
  .dp-feature--usage .dp-feature-copy { grid-column:auto; grid-row:1; }
  .dp-download { display:block; padding:24px; margin-block:8px 32px; }
  .dp-download h2 { font-size:21px; }
  .dp-download .button { margin-top:22px; }
}
@media(prefers-reduced-motion:reduce) { .dp-feature-link { transition:none; } }