/* Approved landing refresh: existing section layout, compact shared branding and supporting artwork. */
.brand-logo { width:40px; height:40px; }
.footer-logo { width:32px; height:32px; }
.brand-type { display:inline-block; white-space:nowrap; color:var(--text); font-weight:800; letter-spacing:-.6px; }
.brand-box { color:#00a887; }
.brand-bracket { color:#37bcae; }
.brand { gap:9px; }
.footer-brand { gap:8px; flex-wrap:wrap; }
.pr-value { margin:0 0 18px; color:var(--accent); font-size:clamp(23px,2.5vw,30px); font-weight:750; line-height:1.3; }
.pr-online-note { max-width:580px; margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.pr-artwork { width:28px; height:28px; object-fit:contain; flex-shrink:0; }
.lp-badge .pr-artwork { width:24px; height:24px; }
.mk-screen { gap:14px; padding:18px 12px 10px; }
.mk-brand { display:flex; align-items:center; justify-content:flex-start; gap:6px; font-size:18px; white-space:nowrap; }
.mk-brand img { object-fit:contain; flex-shrink:0; }
.mk-content { display:grid; gap:10px; align-content:start; min-height:300px; }
.mk-page-title { display:flex; align-items:center; gap:8px; margin:2px 0 4px; font-size:18px; }
.mk-offline { display:flex; gap:5px; align-items:center; margin:0 0 3px; color:var(--accent); font-size:10px; }
.mk-offline .pr-icon { width:14px; height:14px; }
.mk-item > span:has(strong) { flex:1; min-width:0; }
.mk-title { font-size:19px; }
.mk-inline-add { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 8px; border:1px solid var(--line); border-radius:10px; color:var(--accent); font-size:12px; font-weight:700; background:var(--panel); }
.mk-inline-add .pr-icon { width:17px; height:17px; }
.mk-bottom { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; position:relative; padding:12px 0 3px; border-top:1px solid var(--line); margin-top:12px; background:var(--panel); border-radius:12px; }
.mk-bottom > span { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; color:var(--muted); }
.mk-bottom small { font-size:8px; line-height:1.2; white-space:nowrap; }
.mk-bottom .pr-icon { width:18px; height:18px; }
.mk-bottom .mk-nav-scan { color:var(--text); }
.mk-nav-scan i { display:grid; place-items:center; width:42px; height:42px; margin-top:-27px; border-radius:50%; background:#00a887; box-shadow:0 3px 8px #00a88730; }
.mk-nav-scan .pr-artwork { width:25px; height:25px; filter:brightness(0) invert(1); }
.mk-hints { display:flex; gap:10px; }
.mk-hints > span { display:grid; justify-items:center; gap:5px; color:var(--muted); font-size:10px; padding:8px; background:var(--panel); border-radius:10px; }
.mk-hints-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.mk-hints-grid > span { font-size:12px; gap:8px; padding:14px 8px; }
.mk-progress { display:flex; gap:6px; margin:0; color:var(--accent); font-size:11px; line-height:1.5; }
.mk-progress .pr-icon { flex-shrink:0; width:18px; height:18px; }
.mk-periods { display:flex; gap:5px; background:var(--panel); border-radius:10px; padding:4px; font-size:11px; }
.mk-periods > span { flex:1; padding:6px 4px; text-align:center; }
.mk-periods .on { background:var(--panel-2); border-radius:8px; color:var(--accent); font-weight:700; }
.mk-report-summary { display:flex; gap:12px; align-items:center; padding:14px 10px; background:var(--panel); border-radius:12px; }
.mk-report-summary > b { font-size:32px; color:var(--accent); }
.mk-report-summary > span { font-size:12px; }
.mk-report-summary small { display:block; font-size:10px; color:var(--muted); margin-top:4px; }
.mk-bars { display:flex; height:104px; gap:11px; padding:8px 8px 22px; background:var(--panel); border-radius:12px; }
.mk-bars > span { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
.mk-bars i { width:14px; background:#00a887; border-radius:4px 4px 0 0; }
.mk-bars small { position:absolute; top:100%; margin-top:5px; color:var(--muted); font-size:9px; }
.mk-screen img { max-width:100%; }
.mk-source { line-height:1.5; }
.mk-search > .pr-icon:last-child { width:15px; height:15px; }
.mk.mk-small .mk-brand { font-size:11px; gap:3px; }
.mk.mk-small .mk-brand img { width:18px; height:18px; }
.mk.mk-small .mk-note { font-size:10px; }
.mk-dialog .mk-brand { justify-content:center; }
/* Keep tilted phone silhouettes inside the content column on narrow devices. */
@media (max-width:360px) {
  .pr .mk:not(.mk-small) { width:min(280px,100%); }
  .pr .mk.tilt-l, .pr .mk.tilt-r { transform:none; }
}