/* ================================================================
   Brand Name Checker — brand-specific styles
   Phonetic card, type column, free-grid, textarea
   ================================================================ */

/* ===== Tool grid (brand uses 3-col on desktop) ===== */
.tool .grid{grid-template-columns:1.15fr .85fr .85fr}

/* ===== Name card (brand: 3-col with type column) ===== */
.name-card{grid-template-columns:200px 1fr 116px}
.hanzi{font-size:46px}

/* ===== Phonetic card (brand) ===== */
.name-card.phonetic{background:linear-gradient(135deg,#fffdf8,#faefe0);border-color:#f1c9d0}
.name-card.phonetic .hanzi{color:var(--red)}
.ph-label{display:inline-flex;align-items:center;gap:5px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--red2);background:#fbeaec;border:1px solid #f1c9d0;border-radius:999px;padding:3px 9px}
.ph-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
/* ph-extra lives on its own full-width row so the 3 columns above match industry cards */
.ph-extra{grid-column:1 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;padding-top:12px;border-top:1px dashed #f1c9d0}
.phChips{display:flex;gap:4px;flex-wrap:wrap}

/* ===== Type column ===== */
.type{font-family:-apple-system,"Segoe UI",sans-serif;text-align:center;border-radius:12px;background:var(--paper);border:1px solid var(--line);padding:10px;color:var(--muted);font-size:12px}
.type b{display:block;color:var(--ink);font-size:14px}

/* ===== Free-grid (3-col below result) ===== */
.free-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;padding:0 24px 20px}

/* ===== Brand-page responsive ===== */
@media(max-width:840px){
  .pop-grid{grid-template-columns:repeat(3,1fr)}
  .tool .grid,.free-grid,.cards3{grid-template-columns:1fr}
  .name-card{grid-template-columns:1fr;text-align:center;gap:10px}
  .hanzi{font-size:52px}
}
@media(max-width:420px){
  .pop-grid{grid-template-columns:repeat(2,1fr)}
  .hanzi{font-size:45px}
}

/* ===== Brand-only: tighten fake-line padding so 5 rows fit
   in .rp-blur-zone's max-height:220 without overflow/CTA collision ===== */
#paid-sample .rp-fake-line{padding:5px 0}
#paid-sample .rp-blur-zone{max-height:240px}