/* Public pricing page /harga and the legal drafts (/syarat, /privasi, /kebijakan-pengembalian-dana).
   Loaded after app.css + site.css on those SSR pages only. Tokens only; classes are page-specific (.pricing-*, .price-*,
   .compare*, .faq-*, .addon-*, .legal-*). Monthly/yearly toggle: /js/pages/pricing.js sets [data-cycle] on
   [data-pricing]; without JS the monthly price shows with the yearly price as a secondary line. */

/* ---------- Hero ---------- */
.pricing-hero{padding:var(--s-lg) 0 var(--s-xl);background:radial-gradient(900px 420px at 85% -10%,var(--primary-tint),transparent 70%),var(--canvas)}
.pricing-hero-copy{max-width:760px}
.pricing-hero .site-lead{max-width:680px}
.pricing-trial{display:inline-flex;align-items:flex-start;gap:var(--s-sm);margin:var(--s-lg) 0 0;padding:var(--s-sm) var(--s-base);border:1px solid var(--primary-border);border-radius:var(--r-lg);background:var(--canvas);color:var(--ink);font-size:14px;font-weight:500;line-height:1.5}
.pricing-trial svg{flex:none;margin-top:var(--s-xxs);color:var(--primary-text)}
.pricing-toggle{margin-top:var(--s-xl)}
.pricing-toggle[hidden]{display:none}
.save-chip{display:inline-flex;align-items:center;margin-left:var(--s-xs);padding:0 var(--s-sm);border-radius:var(--r-full);background:var(--success-50);color:var(--success-700);font-size:12px;font-weight:600;line-height:20px}
@media (min-width:1024px){.pricing-hero{padding:var(--s-xl) 0 var(--s-xxl)}}

/* ---------- Plan cards: 1 / 2 / 4 columns ---------- */
.pricing-plans{padding:0 0 var(--s-section)}
.price-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-base);align-items:stretch}
@media (min-width:640px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.price-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-lg)}}
.price-card{position:relative;display:flex;flex-direction:column;gap:var(--s-base);min-width:0;padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--canvas);box-shadow:var(--shadow-xs)}
.price-card.is-featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow-sm)}
.price-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-sm)}
.price-name{margin:0;font-size:20px;font-weight:700;line-height:1.3;color:var(--ink)}
.price-badge{display:inline-flex;align-items:center;gap:var(--s-xs);padding:var(--s-xxs) var(--s-sm);border-radius:var(--r-full);background:var(--primary-strong);color:var(--on-primary);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.price-desc{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.price-block{display:flex;flex-direction:column;gap:var(--s-xs)}
.price-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-xs) var(--s-sm);margin:0}
.price-value{font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.price-unit{font-size:14px;color:var(--muted)}
.price-note{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.price-note b{color:var(--success-700);font-weight:600}
/* Without JS: monthly only, yearly as the secondary .price-alt line. With JS: [data-cycle] picks one. */
[data-pricing]:not([data-cycle]) [data-cycle-show="year"]{display:none}
[data-pricing][data-cycle] .price-alt{display:none}
[data-pricing][data-cycle="month"] [data-cycle-show="year"],[data-pricing][data-cycle="year"] [data-cycle-show="month"]{display:none}
.price-quota,.price-feats{display:flex;flex-direction:column;gap:var(--s-sm);list-style:none;margin:0;padding:0;font-size:14px;line-height:1.45;color:var(--body)}
.price-quota{padding:var(--s-md) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.price-quota li,.price-feats li{display:flex;align-items:flex-start;gap:var(--s-sm)}
.price-quota svg{flex:none;margin-top:var(--s-xxs);color:var(--muted)}
.price-quota b{font-weight:600;color:var(--ink)}
.price-feats svg{flex:none;margin-top:var(--s-xxs);color:var(--success-700)}
.price-more{display:flex;flex-direction:column;gap:var(--s-md);min-width:0}
.price-feats-lead{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
.price-desc:empty{display:none}
/* Align name / description / price / button / quotas across the cards of a row (6 children per card). */
@supports (grid-template-rows:subgrid){
  @media (min-width:640px){
    .price-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:var(--s-base);align-content:start}
    .price-desc:empty{display:block}
    .price-card > .btn{align-self:start}
  }
}
.pricing-note{display:flex;align-items:flex-start;gap:var(--s-sm);margin:var(--s-lg) 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.pricing-note svg{flex:none;margin-top:var(--s-xxs)}

/* ---------- Comparison table (scrolls sideways on phones; feature column stays put) ---------- */
.compare-wrap{position:relative;overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--canvas)}
.compare-wrap:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.compare{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.compare th,.compare td{height:auto;padding:var(--s-md) var(--s-base);border-bottom:1px solid var(--hairline);font-size:14px;letter-spacing:0;text-transform:none;text-align:center;vertical-align:middle;white-space:normal}
.compare thead th{position:sticky;top:0;background:var(--surface-soft);color:var(--ink);font-size:15px;font-weight:700}
.compare .compare-feature{position:sticky;left:0;z-index:1;width:34%;min-width:220px;background:var(--canvas);text-align:left}
.compare thead .compare-feature{z-index:2;background:var(--surface-soft)}
.compare tbody th.compare-feature{color:var(--ink);font-weight:500}
.compare-feature small{display:block;margin-top:var(--s-xxs);font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}
.compare tr.compare-group th{padding-top:var(--s-lg);color:var(--primary-text);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.compare tr.compare-group td{padding-top:var(--s-lg)}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:var(--canvas)}
.compare tbody:last-child tr:last-child th,.compare tbody:last-child tr:last-child td{border-bottom:0}
.compare-value{font-weight:500;color:var(--ink)}
.cmp-yes,.cmp-no{display:inline-flex;align-items:center;justify-content:center}
.cmp-yes{color:var(--success-700)}
.cmp-no{color:var(--muted)}

.always{margin-top:var(--s-xl);padding:var(--s-lg);border:1px solid var(--primary-border);border-radius:var(--r-xl);background:var(--primary-tint)}
.always-title{margin:0 0 var(--s-base);font-size:16px;font-weight:600;color:var(--ink)}
.always-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-md) var(--s-xl);list-style:none;margin:0;padding:0}
.always-list li{display:flex;align-items:flex-start;gap:var(--s-sm);font-size:14px;line-height:1.5;color:var(--body)}
.always-list svg{flex:none;margin-top:var(--s-xxs);color:var(--primary-text)}
@media (min-width:640px){.always-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.always-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Add-ons ---------- */
.addon-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-base);list-style:none;margin:0;padding:0}
@media (min-width:640px){.addon-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.addon-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.addon-item{display:flex;align-items:flex-start;gap:var(--s-base);padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--canvas)}
.addon-item h3{margin:var(--s-xxs) 0 var(--s-xs);font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.addon-item p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.addon-item .addon-price{margin-bottom:var(--s-xs);font-weight:600;color:var(--ink)}
.addon-item.is-soon .feature-icon{border-color:var(--hairline);background:var(--surface-strong);color:var(--muted)}
.soon-pill{display:inline-flex;align-items:center;margin-left:var(--s-xs);padding:var(--s-xxs) var(--s-sm);border-radius:var(--r-full);background:var(--surface-strong);color:var(--muted);font-size:12px;font-weight:600;line-height:1.3;vertical-align:middle}

/* ---------- FAQ (native <details>) ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-xl)}
.faq-grid .section-head{margin-bottom:0}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-section);align-items:start}
  .faq-grid .section-head{position:sticky;top:calc(var(--header-h) + var(--s-xl))}
}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item summary{display:flex;align-items:flex-start;gap:var(--s-md);padding:var(--s-base) 0;cursor:pointer;list-style:none;font-size:16px;font-weight:600;line-height:1.45;color:var(--ink);border-radius:var(--r-xs)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:10px;height:10px;margin:var(--s-sm) var(--s-xs) 0 auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item summary svg{flex:none;margin-top:var(--s-xxs);color:var(--primary-text)}
.faq-item summary:hover{color:var(--primary-text)}
.faq-item p{margin:0;padding:0 0 var(--s-lg) calc(20px + var(--s-md));font-size:15px;line-height:1.65;color:var(--body)}

/* ---------- Legal drafts ---------- */
.legal-draft{display:flex;align-items:flex-start;gap:var(--s-sm);max-width:720px;margin:var(--s-lg) 0 0;padding:var(--s-md) var(--s-base);border:1px solid var(--warning-100);border-radius:var(--r-lg);background:var(--warning-50);color:var(--warning-700);font-size:14px;font-weight:500;line-height:1.5}
.legal-draft svg{flex:none;margin-top:var(--s-xxs)}
.legal-page .prose{max-width:72ch}

@media (forced-colors:active){
  .price-card.is-featured{outline:2px solid Highlight}
  .faq-item summary::after{border-color:CanvasText}
}