/* [codex] Upright website foundations, loaded after component styles and in CMS previews.
   Fondasi website Upright. DESIGN-SPEC.md owns usage; these tokens own executable values. */
:root {
 --font-display:Fraunces,Georgia,serif;
 --font-body:"Source Sans 3",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --text-caption:.75rem;
 --text-small:.875rem;
 --text-body:1rem;
 --text-lead:1.125rem;
 --text-card:1.5rem;
 --text-subheading:clamp(1.75rem,2.8vw,2rem);
 --text-section:clamp(2rem,3.6vw,3rem);
 --text-page:clamp(2.5rem,5vw,4rem);
 --text-display:clamp(3rem,7vw,6rem);
 --leading-display:1.08;
 --leading-heading:1.2;
 --leading-body:1.65;
 --leading-ui:1.5;
 --weight-regular:400;
 --weight-medium:500;
 --weight-semibold:600;
 --weight-bold:700;
 --tracking-heading:-.035em;
 --space-1:.25rem;
 --space-2:.5rem;
 --space-3:.75rem;
 --space-4:1rem;
 --space-6:1.5rem;
 --space-8:2rem;
 --space-12:3rem;
 --space-16:4rem;
 --space-24:6rem;
 --section-space:clamp(3rem,6vw,6rem);
 --content-width:80rem;
 --reading-width:min(70ch,44rem);
 --page-gutter:clamp(1.25rem,4vw,2.5rem);
 --radius-control:var(--up-radius-control,.625rem);
 --radius-card:var(--up-radius-card,.875rem);
 --radius-dialog:var(--up-radius-dialog,1.25rem);
 --color-ink:#122334;
 --color-muted:#4a5a68;
 --color-paper:#fdfdfb;
 --color-surface:#f2efec;
 --color-line:#e4e0dc;
 --color-accent:#bdf87a;
 --color-positive:#237347;
 --color-negative:#b42318;
 /* Existing components consume these aliases. / Alias untuk komponen lama. */
 --navy:var(--color-ink);--soft:var(--color-muted);--paper:var(--color-paper);
 --rule:var(--color-line);--line:var(--color-line);--lime:var(--color-accent);
}
body { font:var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-body); }
button,input,select,textarea { font-family:var(--font-body); }
/* Roles apply across routes and languages; IDs only neutralize historical hero overrides.
   Peran sama untuk semua halaman/bahasa; ID menetralkan override hero historis. */
html[lang] #hero-title,.ds-display {
 font:var(--weight-medium) var(--text-display)/var(--leading-display) var(--font-display);
 letter-spacing:var(--tracking-heading);
}
body .page-hero h1,body[data-page] .page-hero h1,.article-head h1,.ds-page-title {
 font:var(--weight-regular) var(--text-page)/var(--leading-display) var(--font-display);
 letter-spacing:var(--tracking-heading);text-wrap:balance;
}
body .page-section h2,body :is(.section-heading,.collage-copy,.operations,.start,.closing,.page-closing,.portfolio-heading)>h2,
body :is(.page-section>.page-wrap,.operations-top>div)>h2,
body :is(.features,.next-actions)>h2,.ds-section-title {
 font:var(--weight-regular) var(--text-section)/var(--leading-heading) var(--font-display);
 letter-spacing:var(--tracking-heading);text-wrap:balance;
}
body :is(.slide,.outcome-tabs) h3,.article-body h2,.article-help h2,
.onboarding-aside h2,.onboarding-card [data-onboarding-step]>legend,#onboarding-review h2,
.contact-layout aside h2,.contact-panel h2,.appsheet-callout h2,.appsheet-callout h3,.ds-subheading {
 font:var(--weight-regular) var(--text-subheading)/var(--leading-heading) var(--font-display);
 letter-spacing:var(--tracking-heading);
}
body :is(.page-section,.service-grid,.portfolio-card,.offer-card,.action-card,.portfolio-benefits,.erp-scope,.addon-card) h3,
.article-body h3,body .calculator h2,.ds-card-title {
 font:var(--weight-medium) var(--text-card)/1.3 var(--font-body);letter-spacing:-.02em;
}
body .plan-top h2,.comparison-head strong,.article-grid .article-tile-title {
 font:var(--weight-regular) var(--text-subheading)/var(--leading-heading) var(--font-display);
 letter-spacing:var(--tracking-heading);
}
.article-grid .article-tile-title { font-size:var(--text-card); }
.comparison-head strong { font-size:var(--text-card); }
body :is(.lede,.page-lede,.article-lede),.ds-lead {
 font:var(--weight-regular) var(--text-lead)/var(--leading-body) var(--font-body);
}
body .page-section p,body .slide p:not(.eyebrow),.section-heading>p,.operation-copy p,
.operations-top>div>p,.outcome-tabs p,.start-copy>p,.start li p,.closing>p,
body :is(.offer-card,.action-card) p,body .faq-list details>p,
.article-grid .article-tile-desc,.contact-layout aside p,.onboarding-aside p,
.ds-body,.cms-copy-preview p {
 font-size:var(--text-body);line-height:var(--leading-body);
}
.article-body { font-size:var(--text-lead);line-height:1.75; }
.article-body :is(p,ul,ol) { font-size:inherit; }
body :is(.button,.inline-link),body .hero-actions .button,.onboarding-choice>span,
body .faq-list summary,.field>span,.onboarding-field>span,.onboarding-subgroup>legend {
 font:var(--weight-medium) var(--text-body)/var(--leading-ui) var(--font-body);
}
body .header .text-button,body .nav-disclosure summary,.nav-cta,.language-switcher .language,
.menu-group .menu-link,.small-menu .menu-link,.drawer-content .menu-link,
.site-footer .footer-link,.site-footer nav>a,.site-footer button,
.article-meta,.article-toc a,.breadcrumb,.share-link,.topic-chips button,
.onboarding-help,.onboarding-back,.onboarding-context,.onboarding-summary dl,
.onboarding-error,.field-error,.input-error,.project-category,.ds-small {
 font-family:var(--font-body);font-size:var(--text-small);line-height:var(--leading-ui);
}
body .eyebrow,.article-topic,.article-grid .article-tile-topic,
.site-footer h2,.footer-bottom,.onboarding-kicker,.onboarding-progress p,
.onboarding-step-list li,.onboarding-field small,.field small,
.onboarding-privacy,.article-toc summary,.solution-group h3,body .menu-group h3,
.mega .menu-link>span,.small-menu .menu-link>span,.mobile-menu .menu-link>span,
.real-screen figcaption,.real-screen small,.screen-disclosure,.project-gallery figcaption,.ds-caption {
 font-family:var(--font-body);font-size:var(--text-caption);line-height:var(--leading-ui);
}
body .menu-featured h2 { font:var(--weight-regular) var(--text-subheading)/var(--leading-heading) var(--font-display); }
body .plan-top p:last-child,body .plan-card ul,.plan-price>span,.plan-price p,
.plan-estimate,.plan-estimate small,.calculator p,.calculator label,.calculator small,
.comparison-row .comparison-label,.comparison-head span,.tier-breakdown,.addon-card ul {
 font-family:var(--font-body);font-size:var(--text-small);line-height:var(--leading-body);
}
/* [codex] Resolve the remaining legacy sans declarations through one family token.
   Font isi komponen lama mengikuti token yang sama, termasuk formulir dan persetujuan. */
#message-text,#onboarding-message,.article-thumb-plain,.article-rail .article-share p,
.comparison-mark,.analytics-consent,.analytics-consent-button,
.analytics-consent-link,.analytics-consent-close,.analytics-settings {
 font-family:var(--font-body);
}
.plan-price strong { font-size:var(--text-subheading);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums; }
.plan-estimate output { font-size:var(--text-card);font-variant-numeric:tabular-nums; }
/* Legacy fine-print and feature-lead rules use !important; keep the exception explicit.
   Dua aturan lama memakai !important; hanya dua peran ini yang perlu pengecualian. */
body .fine-print,body .form-note { font-size:var(--text-caption)!important;line-height:var(--leading-body)!important; }
body .slide .feature-lead { font-size:var(--text-card)!important;line-height:1.3!important; }
.comparison-mark.is-included { color:var(--color-positive); }
.comparison-mark:not(.is-included) { color:var(--color-negative); }
body :is(.field,.onboarding-field,.calculator) :is(input,select,textarea) {
 font:var(--weight-regular) var(--text-body)/var(--leading-ui) var(--font-body);
 border-radius:var(--radius-control);
}
.page-wrap { max-width:var(--content-width);padding-inline:var(--page-gutter); }
.page-section { padding-block:var(--section-space); }
.article-body { max-width:var(--reading-width); }
.plan-cards,.addon-grid,.service-grid { gap:var(--space-6); }
.plan-card,.addon-card { border-radius:var(--radius-card); }
.cms-copy-preview { padding:var(--space-6); }
.cms-copy-preview h2,.cms-pricing-preview>section>h2 {
 font:var(--weight-regular) var(--text-subheading)/var(--leading-heading) var(--font-display);margin-block:var(--space-6);
}
.cms-copy-preview small { font-size:var(--text-caption);color:var(--color-muted); }
.cms-pricing-preview { padding:var(--space-4); }
@media(max-width:47.99rem) {
 :root { --page-gutter:.75rem; }
 .page-wrap { padding-inline:max(var(--page-gutter),env(safe-area-inset-left)) max(var(--page-gutter),env(safe-area-inset-right)); }
}
/* [codex] Footer directory headings and links need reading-size type, not the micro-caption ramp. */
.site-footer h2{font-size:16px;line-height:1.3;letter-spacing:0;font-weight:700}
.site-footer nav>a,.site-footer .footer-link{font-size:15px;line-height:1.5}
@media(max-width:700px){.site-footer h2{font-size:15px}.site-footer nav>a,.site-footer .footer-link{font-size:14px}}
/* [codex] Pricing tiers keep their natural height; a compact work rhythm explains the Growth and Strategic difference. */
.plan-cards{align-items:start}
.plan-card{min-height:0}
.plan-card:nth-child(2){border-color:#81a88b;box-shadow:0 0 0 2px #d4e8d3}
.plan-rhythm{display:grid;gap:8px;margin-top:22px;padding:16px 17px;border-radius:12px;background:#eff4ed}
.plan-card:nth-child(2) .plan-rhythm{background:#d6e8d5}
.plan-rhythm strong{font-size:15px;line-height:1.35}
.plan-rhythm p{margin:0;color:#40554b;font-size:14px;line-height:1.5}
.plan-card .plan-inherits{margin-top:16px}
.plan-card ul{margin-top:18px;margin-bottom:20px}
.plan-estimate{margin-top:12px}

/* [codex] The menu separates six primary paths from software and specialist work. */
#offer-menu{grid-template-columns:minmax(245px,290px) repeat(3,minmax(0,1fr));gap:18px 32px;max-height:calc(100dvh - 88px);overflow-y:auto;padding:24px max(32px,calc((100vw - 1440px)/2)) 28px}
#offer-menu>.menu-featured{grid-row:span 2;align-self:stretch;gap:10px;padding:20px 23px}
#offer-menu>.menu-featured h2{margin:0}
#offer-menu>.menu-featured p{margin:0;font-size:14px;line-height:1.45}
#offer-menu>.menu-featured small{line-height:1.4}
.menu-featured-art{display:block;overflow:hidden;height:132px;margin:-3px -6px 6px;border-radius:9px;background:#cbdcd1}
.menu-featured-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.menu-featured-action{display:inline-flex;width:max-content;align-items:center;gap:12px;margin-top:6px;padding:8px 0;border-bottom:1px solid currentColor;font-size:14px;font-weight:700;text-decoration:none;color:#173f37}
#offer-menu>.menu-group{padding-top:8px}
#offer-menu .menu-group h3{margin-bottom:8px}
#offer-menu .menu-group .menu-link{padding-block:6px}
.menu-secondary{grid-column:2/-1;border-top:1px solid #dce2dd;padding-top:17px}
.menu-secondary-title{margin:0 0 15px;color:#63727b;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.menu-secondary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#offer-menu .menu-bottom{padding-top:14px}
#mobile-offers .menu-featured-art{height:140px}
#mobile-offers .menu-secondary{border-top:1px solid #dce2dd;padding-top:20px}
#mobile-offers .menu-secondary-grid{display:grid;grid-template-columns:1fr;gap:0}
#mobile-offers .menu-secondary-grid .menu-group{margin-bottom:17px}
@media(min-width:1100px) and (max-width:1260px){#offer-menu{gap:15px 20px;padding-inline:24px;grid-template-columns:245px repeat(3,minmax(0,1fr))}}

/* [codex] Every dedicated service page opens with a photo or product view and a clear buying path. */
.service-story-hero{background:#f5f7f2;padding:72px 0 82px}
.service-story-hero .page-wrap{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(35px,6vw,90px);max-width:1320px}
.service-story-copy .eyebrow{color:#426358;font-size:12px;letter-spacing:.11em}
.service-story-copy h1{max-width:13ch;margin:20px 0 20px;font:400 clamp(46px,5vw,76px)/1.02 Fraunces,Georgia,serif;letter-spacing:-.05em;text-wrap:balance;color:#122334}
.service-story-copy .page-lede{max-width:48ch;color:#4c5c56;font-size:19px;line-height:1.55}
.service-story-copy .button{display:inline-flex;margin-top:25px;border:2px solid transparent;background:linear-gradient(#0b5b62,#0b5b62) padding-box,linear-gradient(115deg,#ef776c,#bc71b5,#71ae9b) border-box;color:#fff}
.service-story-media{position:relative;min-height:410px;margin:0;overflow:hidden;border-radius:22px;background:#dfece5}
.service-story-media>img{display:block;width:100%;height:410px;object-fit:cover}
.service-story-media.is-product{display:grid;place-items:center;padding:34px;background:#e8e8f1}
.service-story-media.is-product>img{height:auto;max-height:350px;object-fit:contain;box-shadow:0 18px 35px #0f293525;border-radius:11px}
.service-story-caption{position:absolute;right:15px;bottom:15px;border-radius:7px;background:#122c28d9;padding:7px 10px;color:#fff;font-size:12px;line-height:1.2}
[data-page="digital"] .service-story-copy h1{max-width:18ch;font-size:clamp(45px,4.2vw,65px)}
@media(max-width:700px){.service-story-hero{padding:45px 0 54px}.service-story-hero .page-wrap{grid-template-columns:1fr;gap:30px}.service-story-copy h1{font-size:clamp(43px,10vw,58px)}.service-story-copy .page-lede{font-size:16px}.service-story-media,.service-story-media>img{min-height:250px;height:280px}.service-story-media.is-product>img{max-height:240px}}
/* [codex] Both homepage and destination menus share the same compact grid. */
body .header .nav-disclosure .mega,#offer-menu{display:grid;grid-template-columns:minmax(245px,280px) repeat(3,minmax(0,1fr));grid-template-areas:'feature people advice tech' 'feature secondary secondary secondary' 'bottom bottom bottom bottom';grid-template-rows:auto auto auto;align-content:start;align-items:start;column-gap:clamp(20px,2.4vw,36px);row-gap:18px;max-height:calc(100dvh - 86px);overflow-y:auto;padding:22px clamp(24px,3.4vw,54px) 22px}
body .header .nav-disclosure .mega>.menu-featured,#offer-menu>.menu-featured{grid-area:feature;align-self:start;grid-row:auto;gap:8px;padding:16px 18px}
body .header .nav-disclosure .mega>.menu-group:nth-child(2),#offer-menu>.menu-group:nth-child(2){grid-area:people}
body .header .nav-disclosure .mega>.menu-group:nth-child(3),#offer-menu>.menu-group:nth-child(3){grid-area:advice}
body .header .nav-disclosure .mega>.menu-group:nth-child(4),#offer-menu>.menu-group:nth-child(4){grid-area:tech}
body .header .nav-disclosure .mega>.menu-secondary,#offer-menu>.menu-secondary{grid-area:secondary;grid-column:auto;padding-top:12px}
body .header .nav-disclosure .mega>.menu-bottom,#offer-menu>.menu-bottom{grid-area:bottom;grid-column:auto;padding-top:13px}
body .header .nav-disclosure .mega .menu-featured-art,#offer-menu .menu-featured-art{height:112px;margin:0 0 3px}
body .header .nav-disclosure .mega .menu-featured h2,#offer-menu .menu-featured h2{margin:0}
body .header .nav-disclosure .mega .menu-featured p,#offer-menu .menu-featured p{margin:0;font-size:14px;line-height:1.4}
body .header .nav-disclosure .mega .menu-featured small,#offer-menu .menu-featured small{line-height:1.35}
body .header .nav-disclosure .mega .menu-group h3,#offer-menu .menu-group h3{margin:0 0 7px}
body .header .nav-disclosure .mega .menu-group .menu-link,#offer-menu .menu-group .menu-link{padding-block:5px}
body .header .nav-disclosure .mega .menu-secondary-grid,#offer-menu .menu-secondary-grid{gap:clamp(16px,2.1vw,30px)}
.menu-product-soon{padding:7px 0;color:#52605c;font-size:13px;line-height:1.3}
.menu-product-soon strong,.menu-product-soon span{display:block}
.menu-product-soon strong{color:#152c2c;font-weight:600}
.menu-product-soon em{font-size:10px;font-style:normal;font-weight:700;letter-spacing:.04em;color:#7954af;margin-left:4px}
body .header .nav-disclosure .mega .menu-link span,#offer-menu .menu-link span{font-size:11px;color:#62706b;line-height:1.25}
@media(max-width:1100px){body .header .nav-disclosure .mega,#offer-menu{grid-template-columns:225px repeat(3,minmax(0,1fr));column-gap:17px;padding-inline:24px}.menu-product-soon em{display:block;margin-left:0}}
/* [codex] Explicit tracks prevent the featured panel from pushing the product grid below the fold. */
body .header .nav-disclosure .mega>.menu-featured,#offer-menu>.menu-featured{grid-row:1 / span 2;grid-column:1}
body .header .nav-disclosure .mega>.menu-secondary,#offer-menu>.menu-secondary{grid-row:2;grid-column:2 / -1}
body .header .nav-disclosure .mega>.menu-bottom,#offer-menu>.menu-bottom{grid-row:3;grid-column:1 / -1}