/* ClearCalc section 03: the eight tasks as chips, and one screen's goal / problem / opportunity */
.cc-tasks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cc-tasks li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: var(--fs-card); color: var(--muted); background: var(--surface, transparent); }
.cc-tasks b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.08em; color: var(--text); }
@media (max-width: 760px) { .cc-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cc-method { margin: 24px 0 0; }
.cc-method-label { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cc-method dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cc-method dl > div { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); }
.cc-method dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cc-method dd { margin: 0; font-size: var(--fs-card); color: var(--text); }
.cc-method .hl { background: var(--card-mint); border-color: transparent; }
.cc-method .hl dt { color: #1586aa; }
:root[data-theme="dark"] .cc-method .hl dt { color: #4fb3d4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-method .hl dt { color: #4fb3d4; } }
@media (max-width: 760px) { .cc-method dl { grid-template-columns: 1fr; } }

.cc-wall7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .cc-wall7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }