/* Bento — ubin modern, menu layar penuh, judul lebar */
.fam-bento { --card: var(--surface); --sec-y: clamp(44px, 6vw, 88px); }
.fam-bento .display { line-height: 1.02; }
.fam-bento .h2 { font-size: clamp(1.55rem, 1rem + 2vw, 2.6rem); line-height: 1.08; }
.fam-bento .display em, .fam-bento .h2 em { font-style: normal; color: var(--accent-text); }
.fam-bento .bt-title .display em { color: var(--accent); }
.fam-bento .eyebrow { gap: .5rem; text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--ink); }
.fam-bento .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--primary); }
.fam-bento .bt-title .eyebrow { color: var(--on-primary); }
.fam-bento .bt-title .eyebrow::before { background: var(--accent); }
.fam-bento .hdr { background: color-mix(in oklab, var(--bg) 88%, transparent); }
.fam-bento .brand__mark { border-radius: 12px; }
.fam-bento .brand__name { font-size: 1rem; }
.fam-bento .menu-btn { width: auto; padding: 0 14px; gap: 8px; border-radius: 999px; background: var(--ink); color: var(--bg); border-color: var(--ink); grid-auto-flow: column; }
.fam-bento .mnav { background: var(--bg); }


.fam-bento .feat, .fam-bento .tcard, .fam-bento .step, .fam-bento .cinfo { border: 0; background: var(--surface); border-radius: var(--r-lg); }
.fam-bento .stats { border: 0; gap: 12px; background: transparent; }
.fam-bento .stat { border-radius: var(--r-lg); background: var(--surface); }
.fam-bento .stat:first-child { background: var(--primary); --muted: color-mix(in oklab, var(--on-primary) 78%, var(--primary)); }
.fam-bento .stat:first-child .stat__v { color: var(--on-primary); }
.fam-bento .faq { border: 0; gap: 10px; }
.fam-bento .faq__i { border: 0; padding-inline: 18px; border-radius: var(--r); background: var(--surface); }
.fam-bento .about__img, .fam-bento .about-banner { border-radius: var(--r-lg); }
.fam-bento .cat { border-radius: var(--r-lg); }
.fam-bento { --wf: .84; }
.fam-bento .ftr { background: var(--ink); color: var(--bg); border: 0; --muted: color-mix(in oklab, var(--bg) 62%, var(--ink)); --line: color-mix(in oklab, var(--bg) 16%, var(--ink)); }
.fam-bento .ftr .ftr__links a { color: color-mix(in oklab, var(--bg) 86%, var(--ink)); }
.fam-bento .ftr .socials a { border-color: color-mix(in oklab, var(--bg) 28%, var(--ink)); }
.fam-bento .ftr__word { color: var(--primary); }
.fam-bento .phead--wordmark .h1 { font-size: clamp(2rem, .8rem + 6vw, 6.4rem); line-height: 1.02; }