/* [codex] Apple Design / Interaksi langsung. Brand/editorial layout stays Upright. */
@import url('./upright-design/d98460a/interaction.d287654ba9c8c4ac.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}}

/* [codex] Project add-ons read as scoped offers, with a clear cost state and room for deliverables. */
.plan-card .plan-inherits{margin:23px 0 0;padding:13px 15px;border-left:3px solid #78a75b;background:#f1f5ea;font-weight:700;line-height:1.45}
.plan-card .plan-inherits+ul{margin-top:15px}
.addon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.addon-card{padding:25px 27px;border-color:#c9d2ca;border-radius:16px;gap:14px}
.addon-card h3{font:500 24px/1.2 Fraunces,Georgia,serif;letter-spacing:-.02em;overflow-wrap:normal}
.addon-card>p:not(.addon-price):not(.fine-print){color:#40554b;line-height:1.55}
.addon-card ul{display:grid;gap:6px;list-style:none;padding:14px 0 0;border-top:1px solid #e0e5dc}
.addon-card li{position:relative;padding-left:19px}
.addon-card li::before{content:'✓';position:absolute;left:0;color:#3e7759;font-weight:700}
.addon-card .addon-price{display:inline-flex;align-self:flex-start;margin:0;padding:7px 12px;border-radius:7px;background:#ecf4e5;color:#173d2f;font-size:14px}
.addon-card .inline-link{margin-top:auto}
.addon-card:focus-within,.addon-card:hover{border-color:#4d8a68}
.tech-service-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,90px)}
.tech-service-detail h2{text-align:left;font-size:clamp(25px,2.7vw,34px);margin:0 0 15px}
.tech-service-detail h2:not(:first-child){margin-top:36px}
.tech-service-detail ul{padding:0;margin:0;list-style:none}
.tech-service-detail li{padding:18px 0;border-bottom:1px solid #d6ddd7;font-size:17px;line-height:1.5}
.tech-service-detail li:first-child{border-top:1px solid #d6ddd7}
.tech-service-next{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:50px 0 30px;padding:32px;border-radius:18px;background:#edf3e9}
.tech-service-next h2{margin:0 0 9px}.tech-service-next p{margin:0}
.mega{max-height:calc(100dvh - 88px);overflow-y:auto}
@media(max-width:700px){.addon-grid,.tech-service-columns{grid-template-columns:minmax(0,1fr)}.addon-card{padding:21px}.tech-service-next{display:block;padding:24px;margin-block:30px}.tech-service-next .button{margin-top:18px}.mega{max-height:none}}