/* TECHCOMIN DAY1 CHECKPOINT 3 — visual system normalisation.
   Scope: pages built in checkpoint 3 carry body.cp3 (added by cp3.css consumer pages).
   Rules are additive: they normalise rhythm, cards and media without restyling
   the legacy marketing pages. */
:root{--cp3-max:1120px;--cp3-gap:clamp(14px,2vw,24px);--cp3-radius:12px;
  --cp3-line:#e3e7e5;--cp3-ink:#17211d;--cp3-muted:#5b6b64;--cp3-accent:#0F6B46}
body.cp3{color:var(--cp3-ink)}
body.cp3 .wrap{max-width:var(--cp3-max)}
body.cp3 main.wrap>section.sec{margin-block:clamp(18px,2.4vw,32px)}
body.cp3 h1.page-h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.2;margin:.2em 0 .5em}
body.cp3 h2{font-size:clamp(1.22rem,1.05rem + .7vw,1.6rem);line-height:1.3;margin:0 0 .6em}
body.cp3 h3{font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);line-height:1.35}
body.cp3 p,body.cp3 li{line-height:1.75;color:var(--cp3-ink)}
body.cp3 .lead{font-size:1.05rem;color:var(--cp3-muted)}
body.cp3 img,body.cp3 picture{max-width:100%;height:auto}
/* figures: fixed ratio, no giant blank space */
body.cp3 figure.cp3-fig,body.cp3 figure.cp3-hero,body.cp3 figure.cp3-card-fig{
  margin:clamp(14px,2vw,24px) 0;border-radius:var(--cp3-radius);overflow:hidden;background:#f4f6f5}
body.cp3 figure.cp3-hero img,body.cp3 figure.cp3-fig img,body.cp3 figure.cp3-card-fig img{
  width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
body.cp3 figure.cp3-card-fig img{aspect-ratio:1/1}
body.cp3 figure.cp3-hero img{aspect-ratio:16/9}
body.cp3 figcaption{font-size:.9rem;color:var(--cp3-muted);padding:8px 12px;background:#fafbfa}
/* card grid: equal heights, equal media ratio */
body.cp3 .cp3-grid{display:grid;gap:var(--cp3-gap);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
body.cp3 .cp3-grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
body.cp3 .cp3-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
body.cp3 .cp3-card{display:flex;flex-direction:column;border:1px solid var(--cp3-line);
  border-radius:var(--cp3-radius);overflow:hidden;background:#fff;height:100%}
body.cp3 .cp3-card picture,body.cp3 .cp3-card>a.cp3-thumb{display:block;background:#f4f6f5}
body.cp3 .cp3-card .cp3-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
body.cp3 .cp3-card .cp3-body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
body.cp3 .cp3-card .cp3-body h3{margin:0}
body.cp3 .cp3-card .cp3-fam{margin:0;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cp3-muted)}
body.cp3 .cp3-card .cp3-meta{margin:0;font-size:.86rem;color:var(--cp3-muted)}
body.cp3 .cp3-card .cp3-price{margin:0;font-weight:600}
body.cp3 .cp3-card .cp3-price small{font-weight:400;color:var(--cp3-muted)}
body.cp3 .cp3-acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
body.cp3 .cp3-acts .btn{padding:8px 12px;font-size:.82rem}
body.cp3 .cp3-linklist{list-style:none;padding:0;margin:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
body.cp3 .cp3-linklist a{display:block;padding:10px 12px;border:1px solid var(--cp3-line);
  border-radius:10px;background:#fff;text-decoration:none;color:var(--cp3-ink)}
body.cp3 .cp3-linklist a:hover{border-color:var(--cp3-accent);color:var(--cp3-accent)}
body.cp3 .cp3-nav{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 18px;list-style:none}
body.cp3 .cp3-nav a{display:inline-block;padding:7px 12px;border-radius:999px;background:#f1f5f3;
  text-decoration:none;color:var(--cp3-ink);font-size:.86rem}
body.cp3 .cp3-nav a:hover{background:var(--cp3-accent);color:#fff}
body.cp3 .pending{border-left:4px solid #d9a600;background:#fffaf0;padding:10px 14px;border-radius:8px}
body.cp3 table.data,body.cp3 .table-wrap table{width:100%;border-collapse:collapse}
body.cp3 table.data th,body.cp3 table.data td,body.cp3 .table-wrap th,body.cp3 .table-wrap td{
  border:1px solid var(--cp3-line);padding:8px 10px;text-align:left;vertical-align:middle}
body.cp3 table.data th,body.cp3 .table-wrap thead th{background:#f4f6f5;font-size:.86rem}
body.cp3 .cp3-thumbchip img{width:72px;height:72px;object-fit:cover;border-radius:8px;display:block}
body.cp3 .cp3-secondary{border:1px dashed var(--cp3-line);border-radius:var(--cp3-radius);padding:14px 16px;background:#fbfcfb}
@media (max-width:640px){
  body.cp3 .cp3-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
  body.cp3 .cp3-card .cp3-body{padding:10px 10px 12px}
  body.cp3 .cp3-acts .btn{width:100%;text-align:center}
  body.cp3 figure.cp3-hero img{aspect-ratio:4/3}
}