/* card.css - the card drawing used by the editor preview and by card-render.html (W-0226), after studio/render/card.html.
   Sizes in var(--u) (1% of the card width), so the same rules draw the preview and the 1080 px render. */
.c-card { position:relative; overflow:hidden; background:var(--bg); color:#1c2530; font-family:var(--body); --ink-2:#5b6b7b; }
.c-card.dark { color:#fff; --ink-2:rgba(255,255,255,.85); }
.c-inner { position:absolute; display:flex; flex-direction:column; justify-content:space-between; }
.c-kick { align-self:flex-start; font:700 calc(var(--u)*2.2) / 1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--primary);
  background:var(--accent); padding:calc(var(--u)*1.2) calc(var(--u)*2); border-radius:999px; }
.c-bar { width:calc(var(--u)*9); height:calc(var(--u)*1.2); border-radius:9px; background:var(--accent); margin-bottom:calc(var(--u)*3); }
.c-h { margin:0; font:700 var(--hsize, calc(var(--u)*8.4)) / 1.12 var(--head); letter-spacing:-.015em; }
.c-big { font:800 calc(var(--u)*24) / .95 var(--head); letter-spacing:-.03em; color:var(--primary); margin:0 0 calc(var(--u)*2); }
.c-card.dark .c-big, .c-card.dark .c-qm { color:var(--accent); }
.c-qm { font:800 calc(var(--u)*24) / .6 var(--head); color:var(--primary); height:calc(var(--u)*11); }
.c-rem p { margin:0 0 calc(var(--u)*1.5); font:700 calc(var(--u)*8) / 1.1 var(--head); }
.c-rem p:last-child { color:var(--primary); }
.c-card.dark .c-rem p:last-child { color:var(--accent); }
.c-ol { margin:calc(var(--u)*3) 0 0; padding:0; list-style:none; counter-reset:n; }
.c-ol li { counter-increment:n; display:flex; align-items:center; gap:calc(var(--u)*2.5); font:600 calc(var(--u)*4) / 1.25 var(--body); margin-bottom:calc(var(--u)*2.4); }
.c-ol li::before { content:counter(n); flex:0 0 calc(var(--u)*8); height:calc(var(--u)*8); border-radius:50%; background:var(--primary); color:#fff; font:800 calc(var(--u)*4) / calc(var(--u)*8) var(--body); text-align:center; }
.c-card.dark .c-ol li::before { background:var(--accent); color:#1c2530; }
.c-cta { display:inline-block; margin-top:calc(var(--u)*4); background:var(--primary); color:#fff; font:700 calc(var(--u)*3.6) / 1 var(--body); padding:calc(var(--u)*2.6) calc(var(--u)*4); border-radius:calc(var(--u)*1.6); }
.c-card.dark .c-cta { background:var(--accent); color:#1c2530; }
.c-foot { display:flex; align-items:center; gap:calc(var(--u)*2); font:600 calc(var(--u)*2.8) / 1.2 var(--body); color:var(--ink-2); }
.c-foot i { width:calc(var(--u)*2.4); height:calc(var(--u)*2.4); border-radius:50%; background:var(--accent); }
.c-stars { font-size:calc(var(--u)*6); letter-spacing:calc(var(--u)*.8); color:var(--primary); margin-bottom:calc(var(--u)*3); line-height:1; }
.c-card.dark .c-stars { color:var(--accent); }
.c-rq { font-weight:500; font-style:italic; line-height:1.3; }
.c-who { margin:calc(var(--u)*4) 0 0; font:400 calc(var(--u)*2.8) / 1.35 var(--body); color:var(--ink-2); }
.c-who b { display:block; font:700 calc(var(--u)*3.6) / 1.2 var(--body); color:inherit; margin-bottom:calc(var(--u)*.6); }
.c-logo { position:absolute; object-fit:contain; }
.c-logo.own-badge { background:rgba(255,255,255,.94); border-radius:25%; padding:calc(var(--u)*1.2); box-sizing:border-box; }
.c-zone { position:absolute; border:3px dashed rgba(180,35,24,.8); pointer-events:none; }