/* Datvoro homepage + info pages. Brand frame stays quiet; colour and motion live in the hero art. */
.home{--paper:#fff}
.bar{padding-block:18px}

/* ── Lead line ── */
.lead{padding-block:40px 8px}
.lead p{margin:0;font:400 clamp(22px,2.6vw,30px)/1.35 var(--serif);max-width:28em;text-wrap:pretty}

/* ── Sections ── */
.sect{padding-top:48px}
.sect h2{margin-bottom:20px}

.tcards{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media(min-width:900px){.tcards{grid-template-columns:1fr 1fr}}
.tcard{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.tcard.single{grid-column:1/-1}
.cardlink{display:grid;text-decoration:none;color:inherit;height:100%}
@media(min-width:900px){.tcard.single .cardlink{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.cimg{overflow:hidden;aspect-ratio:3/2;background:var(--mist)}
.cimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.cardlink:hover .cimg img,.cardlink:focus-visible .cimg img{transform:scale(1.02)}
.cbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
@media(min-width:900px){.tcard.single .cbody{padding:32px;justify-content:center}}
.until{margin:0;align-self:flex-start;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--mist)}
.cbody h3{margin:4px 0 0;font:700 22px/1.25 var(--sans)}
.problem{margin:0;font:400 19px/1.45 var(--serif)}
.problem.plain{font:400 17px/1.55 var(--sans);color:var(--ink-soft)}
.snip{margin:6px 0 0;text-wrap:balance;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--mist);border-radius:10px;padding:10px 12px}
.pnote{margin:0;font-size:14px;color:var(--ink-soft)}
.go{margin-top:8px;align-self:flex-start;font-weight:700;border-bottom:2px solid var(--red);padding-bottom:2px}
.cardlink:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:20px}

.past{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:720px){.past{grid-template-columns:repeat(3,1fr)}}
.past a{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:16px;padding:10px;background:#fff}
.past img{width:120px;height:80px;object-fit:cover;border-radius:10px;display:block}
.past strong{display:block;font-size:16px}
.past span{font-size:14px;color:var(--ink-soft);line-height:1.45}
.past small{display:block;margin-top:4px;font-size:13px}
.past a:hover strong{text-decoration:underline}

.how{padding-top:56px}
.steps3{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px;counter-reset:s}
@media(min-width:720px){.steps3{grid-template-columns:repeat(3,1fr)}}
.steps3 li{counter-increment:s;background:var(--mist);border-radius:18px;padding:20px}
.steps3 li::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:15px;margin-bottom:10px}
.steps3 h3{margin:0 0 6px;font:700 18px/1.3 var(--sans)}
.steps3 p{margin:0;color:var(--ink-soft);font-size:15px}
.co{margin:0;font-size:15px;color:var(--ink-soft)}
.co a{color:var(--ink)}
.plainhero{padding-block:48px}

/* ── Info pages ── */
.info{padding-block:24px 8px;max-width:720px}
.info h1{margin-bottom:8px}
.info .upd{color:var(--ink-soft);font-size:14px;margin:0 0 24px}
.info section{margin-top:28px}
.info h2{font-size:24px;margin-bottom:8px}
.info p{margin:0 0 12px;max-width:40em}