/* Fresh — ceria, sudut bulat, blok warna lembut */
.fam-fresh { --card: color-mix(in oklab, var(--bg) 70%, #fff); --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 30px -14px rgb(0 0 0 / .14); }
.fam-fresh .display em, .fam-fresh .h2 em {
  font-style: normal; color: var(--primary-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 15 2 30 7 T 60 7 T 90 7 T 118 6' fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100% .32em; background-position: 0 100%; padding-bottom: .06em;
}
.fam-fresh .hero--full .display em { color: #fff; }
.fam-fresh .eyebrow { padding: .4rem .85rem; border-radius: 999px; background: var(--tint-2); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 600; }
.fam-fresh .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); }
.fam-fresh .hero--full .eyebrow { background: rgb(255 255 255 / .18); color: #fff; }

/* header melayang berbentuk pil */
.fam-fresh .hdr { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding-top: 10px; }
.fam-fresh .hdr__in { min-height: 60px; padding-inline: 12px 8px; border-radius: 999px; background: color-mix(in oklab, var(--card) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fam-fresh .hdr .mnav { margin: 8px var(--gutter) 0; border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.fam-fresh .mnav__in { padding-inline: 16px; }
.fam-fresh .brand__mark { border-radius: 999px; }
.fam-fresh .icon-btn { border-radius: 999px; }
.fam-fresh .nav__a { border-radius: 999px; }
.fam-fresh .nav__a.is-active { background: var(--tint); }
.fam-fresh .nav__a.is-active::after { display: none; }
@media (min-width: 1024px) { .fam-fresh .hdr__in { min-height: 64px; } }

.fam-fresh .hero--collage .collage .hero__img:nth-child(2) { background: var(--tint); }
.fam-fresh .collage { position: relative; }
.fam-fresh .hero--collage .hero__media::after {
  content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: -6%; top: -6%; border-radius: 999px; background: var(--tint-2);
}
.fam-fresh .hero--collage .hero__media { isolation: isolate; }


.fam-fresh .sec--features > .wrap, .fam-fresh .sec--steps > .wrap, .fam-fresh .sec--testimonials > .wrap {
  padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 56px); border-radius: var(--r-lg); background: var(--tint);
}
.fam-fresh .sec--steps > .wrap { background: var(--tint-2); }
.fam-fresh .feat, .fam-fresh .step, .fam-fresh .tcard, .fam-fresh .cinfo { border: 0; box-shadow: var(--shadow); background: var(--card); }
.fam-fresh .feat__ic { border-radius: 999px; background: var(--tint-2); color: var(--ink); }
.fam-fresh .stats { border: 0; gap: 12px; background: transparent; }
.fam-fresh .stat { border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.fam-fresh .cta { background: var(--primary); }
.fam-fresh .cta::after { background: linear-gradient(100deg, color-mix(in oklab, var(--primary) 92%, #000), color-mix(in oklab, var(--primary) 50%, transparent)); }
.fam-fresh .gitem { border-radius: var(--r); }
.fam-fresh .faq__i { border: 0; margin-bottom: 10px; padding-inline: 18px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.fam-fresh .faq { border: 0; }
.fam-fresh .chip { border-color: transparent; background: var(--card); box-shadow: var(--shadow); }
.fam-fresh .chip.is-active { background: var(--primary); color: var(--on-primary); }
.fam-fresh .input, .fam-fresh .select, .fam-fresh .textarea { background: var(--card); }
.fam-fresh .phead--band { background: var(--tint); color: var(--ink); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.fam-fresh .phead--band::after { background: var(--tint-2); opacity: 1; }
.fam-fresh .phead--band .crumbs, .fam-fresh .phead--band .lead { color: var(--muted); }

/* ===== Identitas Fresh: pastel, bulat, ceria ===== */
.fam-fresh .hero .btn-row--stack > .btn { flex: 1 1 auto; white-space: nowrap; }
.fam-fresh .hero__badges { gap: .5rem; }
.fam-fresh .hero__badge { padding: .4rem .85rem; border-radius: 999px; background: var(--tint); color: var(--ink); font-weight: 600; font-size: .86rem; }
.fam-fresh .hero__badge:nth-child(2) { background: var(--tint-2); }
.fam-fresh .hero__badge .ic { display: none; }
.fam-fresh .collage .hero__img:nth-child(1) { border-radius: 46% 54% 42% 58% / 44% 40% 60% 56%; }
.fam-fresh .collage .hero__img:nth-child(2) { border-radius: 50%; }
.fam-fresh .collage .hero__img:nth-child(3) { transform: rotate(4deg); }
/* kategori: bulatan foto di kartu pastel, nama di bawah */
.fam-fresh .cat { aspect-ratio: auto; display: grid; justify-items: center; align-content: start; gap: .5rem; padding: 16px 10px; border-radius: var(--r-lg); background: var(--tint); color: var(--ink); text-align: center; }
.fam-fresh .cat:nth-child(even) { background: var(--tint-2); }
.fam-fresh .cat img { position: relative; inset: auto; z-index: 0; width: 74%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.fam-fresh .cat::after { display: none; }
.fam-fresh .cat__n { opacity: 1; color: var(--muted); }