/* Rewritten pages (About, Refer) and the article slider, on theme tokens */
.tdt-page-hero h1 { max-width: 20ch; }
.tdt-page-ctas { flex-wrap: wrap; }
.tdt-split { display: grid; gap: 12px; }
@media (min-width: 800px) { .tdt-split { grid-template-columns: 1fr 2fr; gap: 32px; } }
.tdt-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .tdt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tdt-grid { grid-template-columns: repeat(4, 1fr); } }
.tdt-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--link); flex: none; }
.tdt-ico svg { width: 22px; height: 22px; }
.tdt-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .tdt-ticks { grid-template-columns: repeat(2, 1fr); } }
.tdt-ticks li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tdt-ticks svg { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 2px; }
.entry-wide { overflow-x: clip; }

/* Article slider: swipe on phones, two at a time from 700px */
.tdt-slider { margin: 2em 0; }
.tdt-slides { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
@media (min-width: 700px) { .tdt-slides { grid-auto-columns: calc(50% - 6px); } }
.tdt-slide { scroll-snap-align: start; display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--tint); color: var(--text) !important; text-decoration: none !important; }
.tdt-slide.is-ad { background: var(--card); }
.tdt-slide b { font: 800 1.1rem/1.2 var(--h); }
.tdt-slide-body { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.tdt-slide-tag { font: 700 .68rem/1 var(--b); letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.tdt-slide.is-ad .tdt-slide-tag { color: var(--muted); }
.tdt-slide-btn { justify-self: start; margin-top: 4px; padding: 10px 16px; border-radius: 12px; background: var(--indigo); color: #fff; font: 700 .95rem var(--h); }
.tdt-slide.is-ad .tdt-slide-btn { background: transparent; color: var(--text); border: 1px solid var(--line); }

/* Kept snippet pages (Contact, Web design): brand colours, no rainbow bar, and Dark/Grey mode */
body .tdc { --tdc-pink: var(--indigo); }
body .tod-web-development { --wd-pink: var(--indigo); --wd-pink-wash: var(--tint); --wd-pink-line: var(--line); --wd-orange: var(--orange); }
.tdc-topbar, .tod-web-development .wd-topbar { display: none; }
:root:not([data-theme="light"]) .tdc { --tdc-paper-2: var(--surface); --tdc-paper: var(--card); --tdc-ink: var(--text); --tdc-grey: var(--muted); --tdc-line: var(--line); background: var(--bg); }
:root:not([data-theme="light"]) .tod-web-development { --wd-paper-2: var(--surface); --wd-paper: var(--card); --wd-ink: var(--text); --wd-grey: var(--muted); --wd-line: var(--line); --wd-indigo-wash: var(--tint); --wd-navy: var(--text); background: var(--bg); }
:root[data-theme="dark"] .tod-web-development .wd-hero::before { background: radial-gradient(46% 40% at 12% 4%, rgba(75, 77, 237, .18), transparent 70%), var(--surface); }
:root[data-theme="dark"] :is(.tdc-input, .tod-web-development input, .tod-web-development textarea) { background: var(--bg); color: var(--text); }