/* [codex] Apple Design / Interaksi langsung. Brand/editorial layout stays Upright. */
@import url('./upright-design/d98460a/interaction.c3b6b07d6391fdff.css');
:root { --up-ui-focus:var(--navy,#122334); }
.closing,.site-footer,.page-closing { --up-ui-focus:var(--lime,#bdf87a); }
:is(.button,.nav-cta,.text-button,.language-switcher .language,.mobile-toggle,.close,.drawer-item,.drawer-back,.nav-disclosure>summary,.onboarding-choice) {
 min-block-size:var(--up-control-height); border-radius:var(--up-radius-control); touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
:is(.button,.nav-cta,.text-button,.onboarding-choice):active { filter:brightness(.95); transition-duration:0s; }
:is(.onboarding-field,.field,.calculator) :is(input,textarea,select) { min-inline-size:0; max-inline-size:100%; border-radius:var(--up-radius-control); }
.analytics-consent-close { min-width:44px; min-height:44px; }
.analytics-settings { min-height:44px; }
/* Content must survive reflow and script loading without an observer threshold. */
.motion-heading.motion-ready :is(.motion-line,.motion-letter),
.motion-heading.motion-ready mark::before,.feature-highlight::before {
 opacity:1!important; transform:none!important; clip-path:none!important; animation:none!important; transition:none!important;
}
@view-transition { navigation:none; }
:is(button,a,input,textarea,select,summary):focus-visible { outline:var(--up-focus-width) solid var(--up-ui-focus); outline-offset:var(--up-focus-offset); }
@media(pointer:coarse),(max-width:47.99rem) {
 :is(.button,.nav-cta,.text-button,.onboarding-choice,.language-switcher .language,.mobile-toggle,.close,.drawer-item,.drawer-back,.nav-disclosure>summary) { min-block-size:44px; }
 :is(.onboarding-field,.field,.calculator) :is(input,textarea,select) { font-size:1rem; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 :is(.site-header,.review-header,.mega,.small-menu,.mobile-menu) { background:var(--paper,#fdfdfb); backdrop-filter:none; }
}

/* [codex] One mobile reading gutter. Keep semantic choices and product evidence intact. */
@media(max-width:47.99rem) {
 .page-wrap { padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
 .onboarding-card,.onboarding-aside { padding:16px 0; border:0; border-radius:0; box-shadow:none; background:transparent; }
 .onboarding-aside { border-top:1px solid var(--line,#d9dfdf); }
 #onboarding-message { padding-inline:12px; overflow-wrap:anywhere; }
 .page-wrap>.portfolio-screen { padding:0; border:0; border-radius:0; box-shadow:none; }
 .portfolio-card-copy { padding-inline:12px; }
 .drawer-content { padding-inline:12px; }
 .preview-dialog { width:100%; max-width:none; max-height:100dvh; margin:0; border:0; border-radius:0; padding: calc(56px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); overscroll-behavior:contain; }
 .preview-dialog .close { min-width:44px; min-height:44px; }
 :is(.onboarding-field,.field,.calculator) :is(input,textarea,select) { font-size:max(16px,1rem); }
}

@media(max-width:47.99rem) {
 .preview-dialog .close { top:max(8px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); }
}
/* [codex] CMS pricing: one mobile gutter, native controls and scoped project cards.
   Harga CMS: satu gutter mobile, kontrol native, dan kartu add-on terpisah. */
.tier-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:28px 0}
.tier-rates>div{display:grid;gap:8px;padding:16px 0;border-block:1px solid var(--up-ui-border,#d7ddd4)}
.tier-rates strong,.tier-breakdown dd{font-variant-numeric:tabular-nums}
.tier-rates small,.comparison-label small{display:block;font-weight:400;line-height:1.5;font-size:.85rem}
.comparison-label small{margin-top:8px}
.tier-details{max-width:760px;margin-top:24px}
.tier-details summary{cursor:pointer;padding:16px 0;font-weight:600}
.tier-breakdown{margin:0}
.tier-breakdown>div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid #d7ddd4}
.tier-breakdown dt small{display:block;margin-top:4px;color:#4f5e59}
.tier-breakdown dd{margin:0;white-space:nowrap}
.tier-sum{font-weight:700}
.addon-filter{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:24px 0}
.addon-filter select{font:inherit;font-size:1rem;min-height:44px;padding:10px 36px 10px 12px;border:1px solid #a5afa8;border-radius:10px;background:#fff;color:#122334}
.addon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.addon-card{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid #d7ddd4;border-radius:14px;background:#fff;min-width:0}
.addon-card h3,.addon-card p{margin:0}
.addon-card ul{padding-left:20px;margin:0;line-height:1.7}
.addon-card .addon-price{margin-top:auto;padding-top:12px;font-weight:650}
.addon-price small{font-weight:400}
.addon-empty{grid-column:1/-1;padding:24px 0}
.plan-card .fine-print{font-size:.85rem;line-height:1.5}
.plan-card h2,.addon-card h3{overflow-wrap:anywhere}
@media(max-width:900px){.addon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.addon-grid{grid-template-columns:minmax(0,1fr)}.addon-card{padding:16px}.tier-rates{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tier-breakdown>div{gap:12px}.addon-filter{align-items:stretch;flex-direction:column}}