:root {
  --orange: #ee4d2d;
  --orange-text: #cf3d22;
  --orange-dark: #c9341b;
  --orange-soft: #fff1ec;
  --ink: #17191f;
  --ink-2: #353944;
  --muted: #666b76;
  --line: #e9e7e4;
  --soft: #faf9f7;
  --card: #fff;
  --green: #07834f;
  --shadow: 0 12px 32px rgba(27, 32, 40, .07);
  --shadow-lg: 0 24px 60px rgba(25, 29, 36, .13);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(232, 229, 225, .9); background: rgba(255, 255, 255, .9); backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; min-height: 76px; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: #fff; background: var(--orange); box-shadow: 0 8px 18px rgba(238, 77, 45, .22); }
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
/* "Riset" + "ika" harus terbaca sebagai SATU kata. Dulu .brand-copy adalah grid polos,
   jadi <strong>, <em>, dan <small> masing-masing jatuh ke barisnya sendiri dan logo
   terbaca "Riset" / "ika" bertumpuk - display:inline pada <strong> tak menolong, sebab
   yang menentukan posisi adalah grid induknya, bukan display anaknya. */
.brand-copy { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; line-height: 1; font-size: 15px; letter-spacing: -.3px; }
.brand-copy strong { grid-column: 1; font-weight: 850; }
.brand-copy em { grid-column: 2; }
.brand-copy small { grid-column: 1 / -1; }
.brand-copy em { color: var(--orange); font-style: normal; font-weight: 850; }
.brand-copy small { margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .1px; }
.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.main-nav a { position: relative; padding: 28px 0; transition: color .18s; }
.main-nav a::after { position: absolute; right: 0; bottom: 19px; left: 0; height: 2px; border-radius: 2px; background: var(--orange); content: ""; opacity: 0; transform: scaleX(.4); transition: opacity .18s, transform .18s; }
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { opacity: 1; transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 11px; }
.plan-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #a6f4c5; border-radius: 999px; color: var(--green); background: #ecfdf3; font-size: 11px; font-weight: 800; white-space: nowrap; }
.plan-pill::before { width: 7px; height: 7px; border-radius: 50%; background: #12b76a; content: ""; }
.header-dashboard { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border: 1px solid #dedbd7; border-radius: 10px; color: var(--ink-2); background: #fff; font-size: 12px; font-weight: 800; transition: border-color .18s, box-shadow .18s, transform .18s; }
.header-dashboard:hover { border-color: #ffb29b; box-shadow: 0 5px 16px rgba(238, 77, 45, .1); transform: translateY(-1px); }
.menu-toggle { display: none; padding: 8px 10px; border: 0; color: var(--ink); background: transparent; cursor: pointer; font-size: 21px; }

.hero-section { position: relative; overflow: hidden; padding: 88px 0 82px; background: radial-gradient(circle at 79% 18%, rgba(255, 222, 208, .8), transparent 27%), linear-gradient(180deg, #fffaf7 0%, #fff 82%); }
.hero-section::before { position: absolute; top: -170px; right: -150px; width: 500px; height: 500px; border: 1px solid rgba(238, 77, 45, .08); border-radius: 50%; content: ""; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 60px; }
.hero-copy { padding: 4px 0 20px; }
.eyebrow, .section-kicker { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: 1.55px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(238, 77, 45, .1); }
.hero-copy h1 { max-width: 590px; margin: 0 0 22px; font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.03em; }
.hero-copy h1 span, .section-heading em, .final-cta h2 em { color: var(--orange); font-style: normal; }
.hero-lead { max-width: 500px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 18px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 850; transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--orange-dark); box-shadow: 0 9px 22px rgba(238, 77, 45, .21); }
.btn-primary:hover { background: var(--orange-dark); box-shadow: 0 13px 27px rgba(238, 77, 45, .27); }
.btn-quiet { border-color: #e5e2de; color: var(--ink-2); background: #fff; }
.btn-quiet:hover { border-color: #ffc3b1; box-shadow: 0 8px 18px rgba(30, 32, 37, .06); }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 42px; }
.hero-proof strong, .hero-proof span { display: block; }
.hero-proof strong { margin-bottom: 4px; color: var(--ink-2); font-size: 11px; }
.hero-proof span { color: var(--muted); font-size: 10.5px; }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar-stack i { display: grid; width: 25px; height: 25px; margin-left: -8px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #aa5f17; font-size: 9px; font-style: normal; font-weight: 900; }
.avatar-stack i:nth-child(2) { background: #3c75ae; }.avatar-stack i:nth-child(3) { background: #4b7c63; }.avatar-stack i:nth-child(4) { color: var(--orange-dark); background: var(--orange-soft); }

.hero-visual { position: relative; min-height: 480px; }
.glow { position: absolute; border-radius: 50%; filter: blur(2px); }
.glow-one { top: 4%; right: 5%; width: 330px; height: 330px; background: rgba(255, 204, 186, .6); }
.glow-two { bottom: 4%; left: 5%; width: 210px; height: 210px; background: rgba(255, 238, 201, .8); }
.dashboard-window { position: absolute; z-index: 2; top: 28px; right: 18px; width: min(100%, 570px); overflow: hidden; border: 1px solid rgba(37, 39, 42, .1); border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg), 0 0 0 10px rgba(255,255,255,.32); transform: rotate(1.5deg); }
.window-bar { display: flex; align-items: center; height: 39px; padding: 0 16px; border-bottom: 1px solid #eeeae5; color: var(--muted); background: #fff; font-size: 10px; font-weight: 800; }
.window-bar b { margin-left: auto; color: var(--green); font-size: 9px; }.window-dots { display: flex; gap: 4px; margin-right: 14px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e4e1dd; }.window-dots i:first-child { background: #ffb09a; }
.window-body { padding: 20px; background: #fbfaf9; }.mock-toolbar { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 12px; }.mock-menu { color: var(--orange); font-size: 16px; }.mock-plan { margin-left: auto; padding: 5px 8px; border-radius: 999px; color: var(--green); background: #ecfdf3; font-size: 8px; font-weight: 850; }
.mock-search { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 12px; border: 1px solid #f0dcd4; border-radius: 9px; color: var(--orange); background: #fff; font-size: 11px; }.mock-search b { color: var(--ink-2); }.mock-search small { margin-left: auto; color: var(--muted); font-size: 9px; }.mock-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 11px; }.mock-metrics > div { padding: 13px 12px; border: 1px solid #eeeae6; border-radius: 10px; background: #fff; }.mock-metrics small, .mock-metrics strong, .mock-metrics span { display: block; }.mock-metrics small { color: var(--muted); font-size: 9px; }.mock-metrics strong { margin: 8px 0 4px; font-size: 17px; letter-spacing: -.7px; }.mock-metrics span { font-size: 8px; font-weight: 800; }.up { color: var(--green); }.neutral { color: #8a6e2f; }.mock-chart-head { display: flex; justify-content: space-between; margin: 23px 2px 8px; color: var(--ink-2); font-size: 10px; }.mock-chart-head span { color: var(--muted); font-size: 8px; }.mock-chart { display: flex; align-items: end; gap: 8px; height: 135px; padding: 12px 12px 0; border: 1px solid #f0ece8; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.9), #fff); }.mock-chart i { flex: 1; min-width: 8px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ff9a7a, #ee4d2d); opacity: .8; }.mock-chart i:nth-child(5) { opacity: 1; }.mock-axis { display: flex; justify-content: space-between; padding: 6px 12px 0; color: var(--muted); font-size: 8px; }.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(231, 222, 215, .9); border-radius: 13px; background: rgba(255,255,255,.94); box-shadow: 0 15px 33px rgba(44, 32, 28, .12); }.floating-card small, .floating-card strong, .floating-card span { display: block; }.floating-card small { color: var(--muted); font-size: 9px; }.floating-card strong { margin-top: 3px; color: var(--ink-2); font-size: 11px; }.floating-opportunity { top: 1px; left: 5px; padding: 11px 14px 11px 10px; }.float-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: var(--orange); font-size: 14px; }.floating-score { right: -6px; bottom: 29px; padding: 12px 15px; }.floating-score > strong { margin: 0; color: var(--orange); font-size: 26px; letter-spacing: -1px; }.floating-score span { margin-top: 3px; color: var(--green); font-size: 9px; font-weight: 800; }

.signal-strip { border-top: 1px solid #f0ece8; border-bottom: 1px solid #f0ece8; background: #fff; }.signal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; align-items: center; min-height: 96px; }.signal-grid > div { padding: 0 24px; border-right: 1px solid #eeeae6; }.signal-grid > div:first-child { padding-left: 0; }.signal-grid > div:last-child { border-right: 0; }.signal-grid strong, .signal-grid span { display: block; }.signal-grid strong { margin-bottom: 4px; font-size: 19px; letter-spacing: -.6px; }.signal-grid span { color: var(--muted); font-size: 10px; }.signal-note { display: flex; align-items: center; gap: 10px; padding-left: 38px !important; }.signal-note span:last-child { max-width: 160px; line-height: 1.5; }.signal-check { display: grid !important; width: 26px; height: 26px; flex: none; place-items: center; border-radius: 50%; color: var(--green) !important; background: #ecfdf3; font-weight: 900; }

.section { padding: 116px 0; }.section-soft { background: var(--soft); }.section-heading { max-width: 510px; }.section-heading.centered { max-width: 660px; margin: 0 auto 46px; text-align: center; }.section-heading h2 { margin: 13px 0 16px; font-size: clamp(31px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.02em; }.section-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }.feature-grid { display: grid; grid-template-columns: 1.13fr .87fr .87fr; gap: 16px; }.feature-card { min-height: 330px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 16px rgba(24, 28, 34, .025); }.feature-card h3 { max-width: 250px; margin: 16px 0 11px; font-size: 21px; line-height: 1.14; letter-spacing: -.7px; }.feature-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.feature-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; font-size: 22px; font-weight: 800; }.feature-icon.orange { color: var(--orange); background: #fff1ec; }.feature-icon.purple { color: #8257cf; background: #f3edff; }.feature-icon.green { color: #07834f; background: #e9faf2; }.feature-icon.blue { color: #3275c4; background: #edf5ff; }.feature-label { display: block; margin-top: 18px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 1.15px; }.feature-large { grid-row: span 2; min-height: 676px; background: linear-gradient(160deg, #fff 60%, #fff8f4); }.feature-large h3 { max-width: 290px; font-size: 28px; }.feature-large p { max-width: 360px; }.feature-mini-table { display: grid; gap: 8px; margin-top: 48px; padding-top: 18px; border-top: 1px solid #f0e8e3; }.feature-mini-table > div { display: grid; grid-template-columns: 1.3fr .85fr 1fr; align-items: center; gap: 7px; padding: 11px 10px; border: 1px solid #f2ece8; border-radius: 9px; background: #fff; font-size: 10px; }.feature-mini-table span { color: var(--ink-2); font-weight: 750; }.feature-mini-table b { color: var(--muted); font-size: 9px; }.feature-mini-table i { color: var(--green); font-size: 8px; font-style: normal; font-weight: 850; text-align: right; }.mini-bars { display: flex; align-items: end; gap: 6px; height: 78px; margin-top: 31px; padding: 10px 8px 0; border-bottom: 1px solid #eeeae6; }.mini-bars i { flex: 1; border-radius: 4px 4px 0 0; background: #d8c7f7; }.mini-bars i:last-child { background: #8a5bd4; }.store-score { margin-top: 28px; padding-top: 15px; border-top: 1px solid #f0ece8; }.store-score span { display: block; color: var(--muted); font-size: 10px; }.store-score strong { display: block; margin: 7px 0 10px; font-size: 30px; letter-spacing: -1px; }.store-score strong span { display: inline; color: var(--muted); font-size: 12px; font-weight: 500; }.store-score i { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #e8f5ee; }.store-score i b { display: block; width: 84%; height: 100%; border-radius: inherit; background: #24ae72; }.feature-wide { display: flex; grid-column: 2 / 4; min-height: 260px; gap: 40px; background: #fff; }.feature-wide .wide-copy { flex: 1; }.feature-wide h3 { max-width: 330px; }.check-list { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 13px; min-width: 300px; color: var(--ink-2); font-size: 11px; font-weight: 750; }.check-list span::first-letter { color: var(--green); }

.steps-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 105px; align-items: start; }.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--orange); font-size: 12px; font-weight: 850; }.text-link span { transition: transform .18s; }.text-link:hover span { transform: translateX(3px); }.steps-list { display: grid; gap: 0; }.step-item { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 0 0 35px; border-bottom: 1px solid #e8e5e1; }.step-item + .step-item { padding-top: 35px; }.step-item:last-child { border-bottom: 0; }.step-number { color: #c6c1bb; font-size: 15px; font-weight: 900; letter-spacing: .6px; }.step-item h3 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.3px; }.step-item p { max-width: 440px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.pricing-section { background: #fffaf7; }.pricing-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 41px; }.current-plan { display: flex; align-items: center; gap: 11px; min-width: 240px; padding: 15px 17px; border: 1px solid #b9efd0; border-radius: 14px; background: #effcf4; }.current-plan-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 5px rgba(18, 183, 106, .12); }.current-plan small, .current-plan strong, .current-plan span { display: block; }.current-plan small { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .8px; }.current-plan strong { margin: 5px 0 3px; font-size: 16px; letter-spacing: -.3px; }.current-plan span:last-child { color: var(--green); font-size: 10px; }.pricing-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; align-items: stretch; }.price-card { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 21px 17px 17px; border: 1px solid #e7e0db; border-radius: 17px; background: #fff; box-shadow: 0 7px 19px rgba(32, 25, 22, .04); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }.price-card:hover { border-color: #ffb49e; box-shadow: var(--shadow); transform: translateY(-4px); }.price-card.featured { border-color: #ffad95; box-shadow: 0 11px 28px rgba(238, 77, 45, .12); }.price-card.current { background: linear-gradient(180deg, #fffaf8, #fff 42%); }.price-card.selected { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(238, 77, 45, .12), 0 13px 30px rgba(238, 77, 45, .12); }.popular-label { position: absolute; top: -11px; left: 15px; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--orange-dark); font-size: 9px; font-weight: 900; }.price-card-top { display: flex; align-items: start; justify-content: space-between; gap: 7px; min-height: 61px; }.price-badge { display: block; margin-bottom: 7px; color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }.price-card h3 { margin: 0; font-size: 21px; letter-spacing: -.6px; }.active-label { padding: 4px 7px; border: 1px solid #a6f4c5; border-radius: 999px; color: var(--green); background: #ecfdf3; font-size: 9px; font-weight: 900; white-space: nowrap; }.price-description { min-height: 55px; margin: 14px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.55; }.price-amount { display: flex; align-items: baseline; min-height: 35px; gap: 5px; }.price-amount strong { font-size: 20px; letter-spacing: -.7px; }.price-amount span { color: var(--muted); font-size: 9px; }.price-quota { display: flex; align-items: center; gap: 6px; margin: 11px 0 16px; padding: 8px 9px; border-radius: 8px; color: var(--ink-2); background: #faf8f6; font-size: 10px; font-weight: 800; }.price-quota span { color: var(--orange-dark); font-size: 13px; }.price-card ul { display: grid; gap: 10px; min-height: 110px; margin: 0 0 18px; padding: 0; list-style: none; }.price-card li { display: flex; align-items: start; gap: 7px; color: var(--ink-2); font-size: 10.5px; line-height: 1.35; }.price-card li span { color: var(--green); font-weight: 900; }.price-button { width: 100%; margin-top: auto; padding: 10px 8px; border: 1px solid #ffbba7; border-radius: 9px; color: var(--orange); background: #fff; cursor: pointer; font-size: 11px; font-weight: 900; transition: color .18s, background .18s; }.price-button:hover, .price-card.selected .price-button { color: #fff; background: var(--orange-dark); }.price-card.current .price-button { border-color: #a6f4c5; color: var(--green); background: #ecfdf3; cursor: default; }.pricing-caption { margin: 17px 2px 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }

.faq-section { padding-bottom: 126px; }.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 110px; }.faq-list { border-top: 1px solid #e7e3de; }.faq-list details { border-bottom: 1px solid #e7e3de; }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; color: var(--ink-2); cursor: pointer; font-size: 13px; font-weight: 800; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { color: var(--orange); content: "+"; font-size: 21px; font-weight: 400; }.faq-list details[open] summary::after { content: "−"; }.faq-list details p { max-width: 610px; margin: -3px 34px 21px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.final-cta { padding: 76px 0; }.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.final-cta .section-kicker { color: rgba(255,255,255,.72); }.final-cta h2 { margin: 13px 0 0; font-size: clamp(29px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.02em; }.final-cta h2 em { color: #ffd7c9; }.btn-light { color: var(--orange); background: #fff; box-shadow: 0 10px 25px rgba(105, 27, 13, .16); }.btn-light:hover { box-shadow: 0 15px 30px rgba(105, 27, 13, .25); }
.site-footer { border-top: 1px solid #ece8e3; background: #fff; }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 90px; color: var(--muted); font-size: 10px; }.footer-brand { color: var(--ink); }.footer-brand .brand-mark { width: 31px; height: 31px; border-radius: 10px; }.footer-brand .brand-copy { font-size: 12px; }.footer-brand .brand-copy small { font-size: 8px; }.footer-inner > a:last-child { color: var(--orange); font-weight: 800; }
.footer-meta { display: grid; gap: 5px; text-align: center; }.footer-meta a { color: var(--orange-text); font-weight: 800; text-decoration: none; }.faq-list details p a { color: var(--orange-text); font-weight: 800; }

@media (max-width: 1120px) {
  .hero-grid { gap: 30px; }.hero-copy h1 { font-size: 55px; }.pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.price-card:nth-child(4), .price-card:nth-child(5) { margin-top: 2px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-large { grid-row: span 1; min-height: 490px; }.feature-wide { grid-column: 1 / -1; }.steps-layout, .faq-layout { gap: 60px; }
}
@media (max-width: 800px) {
  .container { width: min(100% - 36px, 620px); }.header-inner { min-height: 66px; }.main-nav { position: absolute; top: calc(100% + 1px); right: 18px; left: 18px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.main-nav.open { display: flex; }.main-nav a { padding: 12px; }.main-nav a::after { display: none; }.menu-toggle { display: block; }.header-dashboard { padding: 9px 11px; }.header-dashboard span { display: none; }.hero-section { padding: 66px 0 60px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy h1 { max-width: 620px; font-size: 52px; }.hero-visual { min-height: 440px; margin-top: 12px; }.dashboard-window { right: 2%; left: 2%; width: auto; }.floating-score { right: -2px; }.signal-grid { grid-template-columns: 1fr 1fr; padding: 20px 0; }.signal-grid > div { min-height: 46px; padding: 6px 15px; }.signal-grid > div:nth-child(2) { border-right: 0; }.signal-grid > div:last-child { grid-column: 1 / -1; border-top: 1px solid #eeeae6; padding: 16px 15px 3px !important; }.section { padding: 80px 0; }.pricing-intro, .steps-layout, .faq-layout { grid-template-columns: 1fr; display: grid; gap: 35px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-large { min-height: auto; }.feature-mini-table { margin-top: 30px; }.check-list { min-width: 0; }.pricing-grid { grid-template-columns: 1fr 1fr; }.pricing-section .section-heading { max-width: 500px; }.faq-section { padding-bottom: 82px; }.final-cta-inner { align-items: start; flex-direction: column; }.footer-inner { align-items: start; flex-direction: column; justify-content: center; padding: 23px 0; }.footer-inner > span { order: 3; line-height: 1.5; }
}
@media (max-width: 520px) {
  .container { width: min(100% - 30px, 440px); }.brand-copy small { display: none; }.plan-pill { display: none !important; }.header-dashboard { font-size: 10px; }.hero-copy h1 { font-size: 41px; letter-spacing: -0.02em; }.hero-lead { font-size: 14px; }.hero-proof { margin-top: 31px; }.hero-visual { min-height: 350px; }.dashboard-window { top: 24px; }.window-body { padding: 13px; }.mock-metrics { gap: 5px; }.mock-metrics > div { padding: 9px 7px; }.mock-metrics strong { font-size: 13px; }.mock-chart { height: 100px; gap: 4px; }.floating-opportunity { top: -4px; left: -7px; }.floating-score { right: -9px; bottom: 10px; padding: 9px 11px; }.floating-score > strong { font-size: 21px; }.signal-grid { grid-template-columns: 1fr; }.signal-grid > div, .signal-grid > div:nth-child(2), .signal-grid > div:nth-child(3) { border-right: 0; border-bottom: 1px solid #eeeae6; padding: 12px 0; }.signal-grid > div:last-child { border-top: 0; padding: 15px 0 4px !important; }.feature-grid { grid-template-columns: 1fr; }.feature-card, .feature-large { min-height: 0; }.feature-wide { display: block; }.check-list { grid-template-columns: 1fr 1fr; margin-top: 27px; }.pricing-grid { grid-template-columns: 1fr; }.price-card ul { min-height: 0; }.current-plan { min-width: 0; }.section-heading h2 { font-size: 35px; }.faq-list summary { font-size: 12px; }.final-cta { padding: 58px 0; }.final-cta h2 { font-size: 31px; }
}

/* Refined product-led direction: calmer surfaces, stronger hierarchy, fewer effects. */
body { background: #fff; }
.site-header { background: rgba(255, 255, 255, .96); }
.hero-section { padding: 76px 0 72px; background: #faf7f3; }
.hero-section::before, .glow, .floating-card { display: none; }
.hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; }
.hero-copy h1 { max-width: 560px; font-size: clamp(40px, 4.3vw, 60px); line-height: 1.04; letter-spacing: -0.025em; }
.hero-lead { max-width: 470px; font-size: 15px; line-height: 1.7; }
.hero-proof { margin-top: 34px; padding-top: 21px; border-top: 1px solid #e7ded6; }
.hero-visual { min-height: 420px; }
.dashboard-window { position: relative; top: 0; right: auto; left: auto; width: 100%; border-color: #e3ddd7; border-radius: 14px; box-shadow: 0 22px 48px rgba(52, 41, 33, .1); transform: none; }
.window-bar { height: 36px; padding: 0 14px; background: #fff; }
.window-body { padding: 22px; background: #f7f4f1; }
.mock-search { margin-top: 16px; border-color: #e8dfd8; }
.mock-metrics > div { box-shadow: none; }
.mock-chart { height: 120px; border-color: #e8e2dc; background: #fff; }
.signal-strip { background: #f7f4f1; }
.signal-grid { min-height: 86px; }
.section { padding: 102px 0; }
.section-heading h2 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.02em; }
.section-heading p { font-size: 13px; }
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card, .feature-large, .feature-wide { min-height: 305px; border-radius: 14px; box-shadow: none; }
.feature-large { grid-row: auto; background: #fff; }
.feature-large h3 { font-size: 24px; }
.feature-mini-table { margin-top: 34px; }
.feature-wide { grid-column: 1 / -1; }
.feature-wide h3 { max-width: 360px; }
.pricing-section { background: #faf7f3; }
.pricing-intro { margin-bottom: 34px; }
.pricing-grid { gap: 12px; }
.price-card { padding: 20px 16px 16px; border-radius: 13px; box-shadow: none; }
.price-card:hover { box-shadow: 0 8px 22px rgba(39, 31, 27, .07); transform: translateY(-2px); }
.price-card.featured { box-shadow: 0 8px 22px rgba(238, 77, 45, .1); }
.price-card.selected { box-shadow: 0 0 0 2px rgba(238, 77, 45, .1); }
.popular-label { top: 0; right: 0; left: auto; border-radius: 0 13px 0 10px; }
.final-cta { color: var(--ink); background: #f1e6dd; }
.final-cta .section-kicker { color: var(--orange); }
.final-cta h2 em { color: var(--orange); }
.final-cta .btn-light { color: #fff; background: var(--orange); }
.site-footer { background: #fff; }

@media (max-width: 800px) {
  .hero-section { padding: 62px 0 58px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-copy h1 { max-width: 600px; font-size: 52px; }
  .hero-visual { min-height: 0; }
  .dashboard-window { width: 100%; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-large { min-height: 305px; }
  .feature-wide { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .hero-copy h1 { font-size: 41px; letter-spacing: -0.02em; }
  .hero-visual { margin-top: 0; }
  .window-body { padding: 14px; }
  .mock-metrics > div { padding: 9px 7px; }
  .mock-metrics strong { font-size: 13px; }
  .mock-chart { height: 100px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-wide { display: block; }
  .footer-inner > a:last-child { right: 15px; bottom: 15px; padding: 9px 11px; }
}

/* Consistent icon system and restrained motion. */
.ui-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ui-icon-sm { width: 15px; height: 15px; }
.ui-icon-arrow { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.btn:hover .ui-icon-arrow, .text-link:hover .ui-icon-arrow { transform: translateX(4px); }
.header-dashboard:hover .ui-icon-sm { transform: translate(2px, -2px); }
.menu-toggle .ui-icon { width: 22px; height: 22px; }
.mock-menu, .mock-search { display: inline-flex; align-items: center; }
.mock-menu .ui-icon, .mock-search .ui-icon { color: var(--orange); }
.trend-icon { display: inline-block; width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.feature-icon .ui-icon { width: 20px; height: 20px; stroke-width: 1.7; }
.signal-check .ui-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.check-list span { display: inline-flex; align-items: center; gap: 8px; }
.check-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.price-card li .check-icon { width: 13px; height: 13px; margin-top: 1px; }
.active-label { display: inline-flex; align-items: center; gap: 4px; }
.active-label .check-icon { width: 12px; height: 12px; }
.footer-inner > a:last-child { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border: 1px solid #eadbd1; border-radius: 999px; color: var(--orange); background: rgba(255,255,255,.96); box-shadow: 0 10px 26px rgba(48, 36, 29, .14); font-size: 10px; font-weight: 850; opacity: .96; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .22s; }
.footer-inner > a:last-child:hover { background: #fff8f4; box-shadow: 0 14px 30px rgba(48, 36, 29, .2); transform: translateY(-3px); }

@keyframes landing-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes landing-bar-rise { from { transform: scaleY(.15); opacity: .25; } to { transform: scaleY(1); opacity: .82; } }
@keyframes landing-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); } 50% { box-shadow: 0 0 0 5px rgba(18,183,106,.12); } }
.hero-copy { animation: landing-fade-up .7s cubic-bezier(.22,1,.36,1) both; }
.hero-visual { animation: landing-fade-in .85s .1s ease both; }
.signal-grid > div { animation: landing-fade-up .6s .2s cubic-bezier(.22,1,.36,1) both; }
.signal-grid > div:nth-child(2) { animation-delay: .26s; }.signal-grid > div:nth-child(3) { animation-delay: .32s; }.signal-grid > div:nth-child(4) { animation-delay: .38s; }
.mock-chart i { transform-origin: bottom; animation: landing-bar-rise .7s cubic-bezier(.22,1,.36,1) both; }
.mock-chart i:nth-child(2) { animation-delay: .06s; }.mock-chart i:nth-child(3) { animation-delay: .12s; }.mock-chart i:nth-child(4) { animation-delay: .18s; }.mock-chart i:nth-child(5) { animation-delay: .24s; }.mock-chart i:nth-child(6) { animation-delay: .3s; }.mock-chart i:nth-child(7) { animation-delay: .36s; }.mock-chart i:nth-child(8) { animation-delay: .42s; }.mock-chart i:nth-child(9) { animation-delay: .48s; }
.current-plan-dot { animation: landing-pulse 2.4s ease-in-out infinite; }
.motion-ready { opacity: 0; transform: translateY(18px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); transition-delay: var(--motion-delay, 0ms); }
.motion-ready.motion-visible { opacity: 1; transform: translateY(0); }

/* FAQ accordion motion */
.faq-list summary::after { display: none; }
.faq-toggle-icon { position: relative; display: block; width: 15px; height: 15px; flex: none; color: var(--orange); }
.faq-toggle-icon::before, .faq-toggle-icon::after { position: absolute; top: 7px; left: 1px; width: 13px; height: 1.5px; border-radius: 2px; background: currentColor; content: ""; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.faq-toggle-icon::after { transform: rotate(90deg); }
.faq-list details[open] .faq-toggle-icon::after { opacity: 0; transform: rotate(90deg) scaleX(.15); }
.faq-list details > p { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; margin-bottom: 0; transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .25s ease, margin .4s cubic-bezier(.22,1,.36,1); }
.faq-list details[open] > p { max-height: 220px; opacity: 1; margin-top: -3px; margin-bottom: 21px; }

/* Accessibility refinements: contrast, focus, and touch targets. */
.header-dashboard, .price-button, .footer-inner > a:last-child { min-height: 44px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(207, 61, 34, .24); outline-offset: 3px; }
.eyebrow, .section-kicker, .brand-copy em, .text-link, .price-badge, .price-button, .footer-inner > a:last-child { color: var(--orange-text); }
.pricing-caption { color: #756d68; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .motion-ready { opacity: 1; transform: none; }
}

.brand-mark svg.logo-glyph { fill: currentColor; stroke: none; }

/* ============================================================================
   POLES AKHIR — mengembalikan tenaga tanpa membatalkan arah "calmer surfaces"
   di atas. Blok ini SENGAJA terakhir: berkas ini memang disusun berlapis, dan
   lapisan terakhirlah yang berlaku.
   ========================================================================= */

/* --- Pemenggalan baris judul --------------------------------------------- */
/* Judul hero sebelumnya patah jadi "Temukan produk / yang tepat / sebelum /
   menambah stok." - satu kata sendirian di barisnya, bentuk paling buruk untuk
   sebuah judul. text-wrap: balance menyeimbangkan panjang tiap baris; ini
   ekstensi Chrome, jadi dukungannya pasti ada. */
h1, h2, h3, .hero-lead, .section-heading p, .final-cta h2 { text-wrap: balance; }
.hero-copy h1 { max-width: 620px; }

/* --- Sasaran anchor tak boleh bersembunyi di balik header lengket --------- */
/* Header ini position: sticky setinggi ~76px. Tanpa scroll-margin, tautan
   "Harga"/"FAQ" - dan tautan dari dashboard ke landing.html#pricing -
   mendaratkan judul sectionnya TEPAT DI BAWAH header. */
#top, #fitur, #cara-kerja, #pricing, #faq { scroll-margin-top: 96px; }

/* --- Kartu fitur: hairline + angkat halus -------------------------------- */
/* Lapisan "calmer" mematikan seluruh bayangan, jadi kartunya rata dengan latar
   dan tak terbaca sebagai objek yang bisa disentuh. Dikembalikan seperlunya:
   satu garis rambut, dan angkat tipis saat kursor mendekat. */
.feature-card { border-color: #ece7e2; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-card:hover { border-color: #f6d3c4; box-shadow: 0 14px 30px -16px rgba(52, 41, 33, .45); transform: translateY(-3px); }

/* --- "Cara kerja": beri bidang pada tiap langkah -------------------------- */
/* Dulu tiga baris teks tipis dipisah garis, dengan ruang kosong lebar di
   kanannya - bagian paling sepi di halaman. Sekarang tiap langkah punya
   bidangnya sendiri dan nomornya jadi lencana, bukan angka abu-abu. */
.steps-list { gap: 10px; }
.step-item { align-items: start; padding: 20px 22px; border: 1px solid #efeae5; border-radius: 16px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.step-item + .step-item { padding-top: 20px; }
.step-item:last-child { border-bottom: 1px solid #efeae5; }
.step-item:hover { border-color: #f6d3c4; box-shadow: 0 14px 30px -16px rgba(52, 41, 33, .4); transform: translateY(-2px); }
.step-item { grid-template-columns: 46px 1fr; gap: 18px; }
.step-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--orange-dark); background: #fff1ec; font-size: 13px; font-weight: 900; letter-spacing: 0; }

/* --- Penutup halaman harus BENAR-BENAR menutup ---------------------------- */
/* Ini satu-satunya tempat di halaman yang boleh berteriak: ajakan terakhir.
   Sebagai bidang krem, ia justru jadi pita paling lemah di halaman yang warna
   mereknya oranye kuat. Sisa halaman tetap tenang. */
.final-cta { color: #fff; background: linear-gradient(112deg, #bf2f18 0%, #c9341b 54%, #cf3d22 100%); }
.final-cta .section-kicker { color: #fff; }
.final-cta h2 { color: #fff; }
.final-cta h2 em { color: #ffdcce; }
.final-cta .btn-light { color: var(--orange-text); background: #fff; box-shadow: 0 12px 26px rgba(105, 27, 13, .22); }
.final-cta .btn-light:hover { background: #fff; box-shadow: 0 16px 34px rgba(105, 27, 13, .3); }

/* --- Tombol "Kembali ke atas" ------------------------------------------- */
/* Ia position: fixed dan SELALU tampil - termasuk saat halaman masih di paling
   atas, di mana ia tak berguna dan justru menutupi isi (sempat menimpa kartu
   harga). Sekarang baru muncul setelah tergulir jauh; kelasnya dipasang
   landing.js. */
.footer-inner > a:last-child { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease, visibility .22s ease, background .18s, box-shadow .18s; }
.footer-inner > a:last-child.is-shown { opacity: 1; visibility: visible; transform: none; }
.footer-inner > a:last-child.is-shown:hover { transform: translateY(-3px); }

/* --- Fokus papan ketik --------------------------------------------------- */
/* Halaman ini sama sekali tak punya penanda fokus: pengguna papan ketik
   berjalan buta. :focus-visible hanya muncul untuk navigasi papan ketik, jadi
   tak mengubah apa pun bagi pengguna tetikus. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 10px;
}
.final-cta a:focus-visible { outline-color: #fff; }

/* --- Tombol ganti tampilan terang/gelap ---------------------------------- */
/* Satu gaya dipakai di dashboard maupun landing supaya tombolnya terasa sebagai
   kontrol yang sama, bukan dua tombol berbeda yang kebetulan mirip. */
.btn-theme {
  display: inline-grid; width: 38px; height: 38px; flex: none; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-2); background: var(--card); cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.btn-theme:hover { color: var(--orange); border-color: var(--orange-border, var(--orange)); }
.btn-theme svg { width: 18px; height: 18px; }
.btn-theme:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---- Kartu paket, susunan baru ---------------------------------------------
   Yang berubah dari versi lama, dan alasannya:

   1. HARGA jadi elemen terbesar. Dulu nama paket 21px dan harganya 20px, jadi
      hal yang paling dicari orang di halaman ini justru kalah besar dari label.
   2. Nama paket naik ke atas sebagai teks kecil huruf besar, dengan satu baris
      penjelas di bawahnya - pembaca tahu untuk siapa kartunya sebelum melihat
      angkanya.
   3. Fitur yang TIDAK didapat tetap ditulis, dengan bulatan kosong dan warna
      redup. Menyembunyikan batas paket membuat pembaca tak punya alasan untuk
      naik; menuliskannya justru yang menjual paket di sebelahnya.
   Blok ini ditaruh di akhir berkas supaya menimpa aturan lama tanpa membedah
   baris panjang di atas. */
.pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.price-card {
  padding: 26px 22px 22px;
  border-radius: 18px;
  cursor: pointer;
}
.price-card-top { display: block; min-height: 0; position: relative; }
.price-card .price-badge {
  display: block;
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.price-card.featured .price-badge { color: var(--orange-dark); }
.price-card .price-sub {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.price-card .active-label { position: absolute; top: -2px; right: 0; }

.price-card .price-amount {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 0;
  margin: 20px 0 0;
}
.price-card .price-amount i {
  color: var(--ink-2);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}
.price-card .price-amount strong {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1;
}
.price-card .price-amount span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.price-card .price-description {
  min-height: 52px;
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
}
.price-card .price-quota { margin: 16px 0 0; }

/* Garis pemisah sebelum daftar fitur: memisahkan "apa dan berapa" dari
   "isinya apa saja". */
.price-card ul {
  gap: 11px;
  min-height: 132px;
  margin: 18px 0 20px;
  padding: 17px 0 0;
  border-top: 1px solid var(--line, #eeeae6);
}
.price-card li { align-items: center; font-size: 11.5px; }
.price-card li.kunci { color: var(--muted); }
/* Bulatan kosong = tidak termasuk. Sengaja BUKAN tanda silang: silang terbaca
   sebagai kesalahan, padahal ini sekadar batas paket. */
.price-card li .dot-kunci {
  width: 13px;
  height: 13px;
  flex: none;
  border: 1.5px solid #d7d2ce;
  border-radius: 50%;
}
.price-card li.ada .check-icon { stroke: var(--orange-dark); stroke-width: 3; }

.price-button { padding: 12px 8px; border-radius: 11px; font-size: 12px; }
.price-card.featured .price-button {
  border-color: transparent;
  color: #fff;
  background: var(--orange-dark);
}
.price-card.featured .price-button:hover { background: var(--orange-text, #c9341b); }
.price-button[disabled] { cursor: default; opacity: 1; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card ul { min-height: 0; }
  .price-card .price-description { min-height: 0; }
}

/* Di mode gelap generator memetakan --ink-2 dan --muted ke warna yang SAMA, jadi
   baris "tidak termasuk" kehilangan keredupannya persis di tempat pembedaan itu
   paling dibutuhkan. Warna ini dipilih tangan: cukup redup untuk terbaca sebagai
   batas paket, masih 5,6:1 di atas latar kartu gelap - jauh di atas ambang AA. */
[data-theme="dark"] .price-card li.kunci { color: #8e8c8a; }
[data-theme="dark"] .price-card li .dot-kunci { border-color: #4a4744; }

/* ---- Cahaya kartu -----------------------------------------------------------
   Di latar hitam, kartu tanpa bayangan terlihat seperti kotak datar yang dicat -
   tak ada kesan terangkat sama sekali, dan kartu unggulannya tak menonjol.
   Aturan gelap di bawah SENGAJA berselektor lebih panjang (.pricing-grid ikut
   disebut): theme-dark.css dibangkitkan dan dimuat SESUDAH berkas ini, jadi
   aturan berkekhususan sama akan kalah oleh versi bangkitannya. */
.price-card .popular-label {
  top: -11px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 5px 13px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.pricing-grid { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.price-card.featured {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(238, 77, 45, .32), 0 16px 38px rgba(238, 77, 45, .16);
}

[data-theme="dark"] .pricing-grid .price-card {
  border-color: #34322f;
  background: #191817;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .pricing-grid .price-card:hover {
  border-color: #5c4a41;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .62);
}
/* Kartu unggulan: cincin oranye tipis + dua lapis cahaya. Lapis dekat memberi
   tepinya bentuk, lapis jauh yang bikin ia terlihat menyala di halaman hitam. */
[data-theme="dark"] .pricing-grid .price-card.featured,
[data-theme="dark"] .pricing-grid .price-card.featured:hover {
  border-color: var(--orange-dark);
  background: linear-gradient(180deg, #221a15 0%, #191817 58%);
  box-shadow:
    0 0 0 1px rgba(255, 117, 36, .5),
    0 18px 46px rgba(255, 117, 36, .3),
    0 0 92px rgba(255, 117, 36, .14);
}
[data-theme="dark"] .pricing-grid .price-card.selected {
  box-shadow:
    0 0 0 1px rgba(255, 117, 36, .5),
    0 18px 46px rgba(255, 117, 36, .3),
    0 0 92px rgba(255, 117, 36, .14);
}
[data-theme="dark"] .pricing-grid .price-card.current {
  border-color: #2f6a48;
  box-shadow: 0 0 0 1px rgba(47, 106, 72, .5), 0 18px 44px rgba(18, 183, 106, .18);
}
[data-theme="dark"] .price-card .popular-label {
  box-shadow: 0 6px 18px rgba(255, 117, 36, .45);
}

/* Atribut `hidden` cuma menyembunyikan lewat aturan bawaan peramban
   ([hidden]{display:none}), dan aturan bawaan SELALU kalah dari stylesheet ini.
   Jadi tiap kelas di sini yang menyetel display sendiri diam-diam membatalkan
   `hidden`-nya. Dua korbannya di landing.html: #current-plan (.current-plan
   display:flex) terus tampil sebagai "PAKET ANDA / Memuat…" untuk pengunjung
   yang belum login - teksnya memang cuma placeholder, jadi terlihat seperti
   halaman yang menggantung - dan #landing-plan-pill (.plan-pill display:
   inline-flex) tampil sebagai pil hijau kosong di header. Berkas CSS lain di
   ekstensi ini (checkout, dashboard, content, roas, pdproas) sudah punya baris
   ini; landing.css satu-satunya yang terlewat. */
[hidden] { display: none !important; }

/* ---- Pemilih durasi langganan (1 bulan / 6 bulan / 1 tahun) ---------------
   Satu baris pil di atas kartu harga. Kartu yang tidak dijual per durasi
   (Gratis, dan paket lama yang hanya ditetapkan admin) sengaja tidak ikut
   berubah: menawarkan "1 Tahun" untuk sesuatu yang tak punya harga tahunan
   berarti mengarang angka di halaman yang paling dipercaya orang.

   .price-hemat SELALU digambar, juga saat kosong. Baris yang muncul dan hilang
   membuat seluruh deret kartu naik-turun setiap kali durasinya diganti. */
.durasi-bar { display: flex; justify-content: center; gap: 5px; width: fit-content; margin: 0 auto 24px; padding: 5px; border: 1px solid #e7e0db; border-radius: 999px; background: #fff; box-shadow: 0 7px 18px rgba(32, 25, 22, .05); }
.durasi-opsi { display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 900; transition: color .18s, background .18s; }
.durasi-opsi:hover { color: var(--orange-dark); }
.durasi-opsi.is-active { color: #fff; background: var(--orange-dark); }
.durasi-hemat { padding: 3px 7px; border-radius: 999px; background: #ecfdf3; color: var(--green); font-size: 9px; font-weight: 900; }
.durasi-opsi.is-active .durasi-hemat { background: rgba(255, 255, 255, .2); color: #fff; }
/* Harga normal yang dicoret, di atas harga sekarang.

   Barisnya SELALU digambar, juga saat paketnya tidak punya harga coret, dengan
   alasan yang sama seperti .price-hemat: baris yang muncul dan hilang membuat
   seluruh deret kartu naik-turun tiap kali durasinya diganti. */
.price-coret { min-height: 14px; margin: 7px 0 2px; color: var(--muted); font-size: 11px; font-weight: 800; }
.price-coret s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.price-hemat { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: 6px; color: var(--muted); font-size: 9.5px; }
.price-hemat em { padding: 3px 6px; border-radius: 999px; background: #ecfdf3; color: var(--green); font-size: 9px; font-style: normal; font-weight: 900; }

/* Di ponsel ketiganya jadi tiga kolom sama lebar, label di atas lencana hemat.
   Dibungkus (flex-wrap) ia menaruh "1 Tahun" sendirian di baris kedua selebar
   layar - terbaca seperti tombol utama, padahal ketiganya setara. */
@media (max-width: 640px) {
  .durasi-bar { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 15px; }
  .durasi-opsi { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 5px; font-size: 11px; }
  .durasi-hemat { padding: 2px 6px; font-size: 8.5px; }
}