*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f0eb;--card:#fff;--ink:#1a1714;--muted:#7a7168;
  --accent:#8e4a20;--accent2:#1a5038;--accent3:#254a82;
  --full:#8e4a20;--mid:#ae7632;--light:#254a82;--ultra:#6a615a;
  --tag-bg:#f0ebe5;--border:#e0d9d0;
  --premium:#6e5814;--value:#1a5038;--budget:#254a82;
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}

.page{max-width:1100px;margin:0 auto;padding:32px 20px 60px}

header{text-align:center;margin-bottom:40px;padding:40px 20px 32px;background:var(--ink);color:var(--bg);border-radius:16px;position:relative;overflow:hidden}
header::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(196,75,43,.15)}
header::after{content:'';position:absolute;bottom:-60px;left:-30px;width:180px;height:180px;border-radius:50%;background:rgba(43,107,79,.1)}
header h1{font-family:'Space Mono',monospace;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;letter-spacing:-1px;position:relative}
header p{margin-top:8px;color:#b5ada3;font-size:.95rem;position:relative}

.legend{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:center;margin-bottom:32px;padding:16px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.legend-item{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted)}
.legend-dot{width:12px;height:12px;border-radius:3px}

.section-title{font-family:'Space Mono',monospace;font-size:1.1rem;color:var(--muted);margin:36px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--border);letter-spacing:1px;text-transform:uppercase}

.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:8px}

.brand-card{background:var(--card);border-radius:14px;border:1px solid var(--border);overflow:hidden;transition:box-shadow .2s}
.brand-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}

.brand-header{padding:16px 18px 12px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border)}
.brand-name{font-family:'Space Mono',monospace;font-size:1.05rem;font-weight:700;letter-spacing:-.5px}
.brand-owner{font-size:.72rem;color:var(--muted);margin-top:2px}
.brand-tier{font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px}
.tier-premium{background:#f5ecd4;color:var(--premium)}
.tier-mid{background:#e0f0e8;color:var(--value)}
.tier-value{background:#dde6f2;color:var(--budget)}

.variants{padding:12px 18px 16px}
.variant{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border)}
.variant:last-child{border-bottom:none}
.strength-bar{width:48px;height:8px;background:var(--tag-bg);border-radius:4px;overflow:hidden;flex-shrink:0}
.strength-fill{height:100%;border-radius:4px}
.str-full{width:100%;background:var(--full)}
.str-mid{width:70%;background:var(--mid)}
.str-light{width:45%;background:var(--light)}
.str-ultra{width:25%;background:var(--ultra)}
.variant-name{font-size:.88rem;font-weight:500;flex:1}
.variant-strength{font-size:.7rem;color:var(--muted);width:52px;text-align:right;flex-shrink:0}
.variant-size{font-size:.68rem;color:var(--muted);background:var(--tag-bg);padding:2px 6px;border-radius:4px;flex-shrink:0}

.alt-section{padding:0 18px 16px}
.alt-label{font-size:.72rem;font-weight:600;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.alt-tags{display:flex;flex-wrap:wrap;gap:5px}
.alt-tag{font-size:.78rem;padding:3px 10px;border-radius:20px;background:#e8f4ee;color:var(--accent2);border:1px solid #c8e4d4}

.guide-box{background:var(--card);border-radius:14px;border:1px solid var(--border);padding:24px;margin-top:36px}
.guide-box h3{font-family:'Space Mono',monospace;font-size:1rem;margin-bottom:12px;color:var(--accent)}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.guide-item{padding:14px;background:var(--tag-bg);border-radius:10px}
.guide-item strong{font-size:.85rem;display:block;margin-bottom:4px}
.guide-item p{font-size:.82rem;color:var(--muted)}

.colour-key{margin-top:36px;background:var(--ink);color:var(--bg);border-radius:14px;padding:24px}
.colour-key h3{font-family:'Space Mono',monospace;font-size:1rem;margin-bottom:14px}
.ck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ck-item{display:flex;align-items:center;gap:10px;font-size:.84rem}
.ck-swatch{width:28px;height:18px;border-radius:4px;border:1px solid rgba(255,255,255,.2)}

footer{text-align:center;margin-top:40px;font-size:.75rem;color:var(--muted)}

/* ========== PRINT — landscape A4 (297 × 210 mm) ========== */
@page{size:A4 landscape;margin:5mm 7mm}

@media print{
  html,body{background:#fff;color:#000;font-size:7pt;line-height:1.2;font-weight:500;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* darker borders so layout still reads on greyscale printers */
  :root{--border:#a69f94}

  /* stronger font weights across the board for print legibility */
  .brand-name{font-weight:700}
  .brand-owner,.variant-strength,.variant-size,.alt-tag,.cl-label,.ck-item,.guide-item p,footer,.legend-item{font-weight:500}
  .variant-name{font-weight:600}
  .alt-label,.brand-tier,.section-title,.colour-key h3,.guide-box h3,.guide-item strong,.cl-val{font-weight:700}

  .page{max-width:none;padding:0;margin:0}

  /* header — light print-friendly bar */
  header{padding:2px 10px;margin-bottom:2px;border-radius:0;background:none!important;color:var(--ink);border-bottom:1.5px solid var(--ink)}
  header::before,header::after{display:none}
  header h1{font-size:8pt;display:inline;color:var(--ink)}
  header h1 br{display:none}
  header p{font-size:5pt;margin-top:0;display:inline;margin-left:8px;color:var(--muted)}

  /* legend — smaller than body text but still readable */
  .legend{padding:1px 6px;margin-bottom:2px;gap:1px 8px;border-radius:2px;border-color:var(--border)}
  .legend-item{font-size:5pt;gap:2px}
  .legend-dot{width:6px;height:6px;border-radius:1px}

  /* section titles */
  .section-title{font-size:7.5pt;margin:0 0 1px;padding-bottom:1px;border-bottom-width:1px}

  /* ---- tier layout: table (most reliable for print) ---- */
  .tiers-row{display:table!important;width:100%!important;border-spacing:5px 0}
  .tiers-left{display:table-cell!important;width:66%!important;vertical-align:top!important}
  .tiers-left-top{display:table!important;width:100%!important;border-spacing:0 0}
  .tiers-left-top .tier-col{display:table-cell!important;width:50%!important;vertical-align:top!important;padding-right:5px}
  .tier-right{display:table-cell!important;width:34%!important;vertical-align:top!important}

  /* ---- chart box: full width of left 2/3, pie in col 1, legend in col 2 ---- */
  .chart-box{margin-top:4px;padding:4px 8px;border:1px solid var(--border);border-radius:3px}
  .chart-box .section-title{margin:0 0 3px;font-size:6.5pt;border-bottom:none;padding:0}
  .chart-container{padding:0!important;margin:0!important;border:none!important;border-radius:0!important;background:none!important;display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:6px!important;align-items:center!important;justify-items:stretch!important}
  .pie-wrap{width:100%!important;max-width:160px!important;justify-self:center!important;align-self:center!important}
  .pie-svg{width:100%!important;height:auto!important;display:block!important;margin:0 auto!important}
  .chart-legend{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:8px!important;row-gap:1px!important;width:100%!important;align-content:center!important}
  .cl-item{font-size:6pt!important;gap:3px!important;display:flex!important;align-items:center!important}
  .cl-dot{width:6px!important;height:6px!important;border-radius:1px!important;flex-shrink:0!important}
  .cl-label{flex:1!important;min-width:0!important}
  .cl-val{font-size:6pt!important;width:auto!important;text-align:right!important;flex-shrink:0!important}

  /* brand grid — single column within each tier */
  .brand-grid{grid-template-columns:1fr!important;gap:2px!important;margin-bottom:1px!important}

  .brand-card{border-radius:2px;border-width:.5px;page-break-inside:avoid}
  .brand-header{padding:0 4px}
  .brand-name{font-size:7pt;letter-spacing:0}
  .brand-owner{font-size:5pt;margin-top:0}
  .brand-tier{font-size:5pt;padding:0 3px;border-radius:2px}

  .variants{padding:0 4px}
  .variant{padding:0;gap:3px;border-bottom-width:.5px}
  .strength-bar{width:20px;height:3.5px;border-radius:1px}
  .variant-name{font-size:6.5pt}
  .variant-strength{font-size:5.5pt;width:22px}
  .variant-size{font-size:5pt;padding:0 2px;border-radius:2px}

  .alt-section{padding:0 4px 1px}
  .alt-label{font-size:5pt;margin-bottom:0}
  .alt-tags{gap:1px}
  .alt-tag{font-size:5.5pt;padding:0 3px;border-radius:6px;background:none!important;border:0.5px solid var(--muted);color:var(--ink)}

  /* colour key — light bottom bar */
  .colour-key{margin-top:3px;padding:3px 8px;border-radius:3px;background:none!important;color:var(--ink);border:1px solid var(--border)}
  .colour-key h3{font-size:6.5pt;margin-bottom:1px;color:var(--ink)}
  .ck-grid{grid-template-columns:repeat(4,1fr);gap:0 6px}
  .ck-item{font-size:6pt;gap:3px;color:var(--ink)}
  .ck-swatch{width:12px;height:7px;border-radius:1px;border-color:var(--border)!important}

  /* guide — 6 columns, ultra compact */
  .guide-box{margin-top:2px;padding:3px 8px;border-radius:3px}
  .guide-box h3{font-size:6.5pt;margin-bottom:1px}
  .guide-grid{grid-template-columns:repeat(6,1fr);gap:2px}
  .guide-item{padding:1px 3px;border-radius:2px;background:none!important;border:.5px solid var(--border)}
  .guide-item strong{font-size:6pt;margin-bottom:0}
  .guide-item p{font-size:5.5pt;color:var(--ink)}

  footer{margin-top:2px;font-size:5.5pt}
}

@media(max-width:700px){
  .brand-grid{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:1fr}
  .ck-grid{grid-template-columns:1fr 1fr}
  .chart-container{flex-direction:column}
  .pie-wrap{max-width:280px}
}

.chart-container{display:flex;gap:32px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--card);border-radius:14px;border:1px solid var(--border);padding:28px;margin-bottom:8px}
.pie-wrap{width:320px;flex-shrink:0}
.pie-svg{width:100%;height:auto;display:block}
.chart-legend{display:flex;flex-direction:column;gap:6px}
.cl-item{display:flex;align-items:center;gap:8px;font-size:.85rem}
.cl-dot{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.cl-label{flex:1;min-width:130px}
.cl-val{font-family:'Space Mono',monospace;font-weight:700;font-size:.82rem;color:var(--muted);width:42px;text-align:right}