/* ═══════════════════════════════════════════════════════════════ TYPE ROLES | File: /static/css/shell/mani-type.css Loaded LAST, on every page, in both languages. WHY THIS FILE EXISTS Sizes were unified into 13 tokens in mani-colors-ltr.css, and that was not enough: a token says how BIG something is, never what it IS. So a card title, a button, a table cell and a paragraph all ended up on --fs-body, each one re-inventing its own font-weight and line-height at the call site. The hierarchy died in the middle sizes, which is exactly where a page is read. A ROLE IS ONE DECISION, NOT FOUR Every class below fixes size + weight + line-height + tracking together. If you find yourself writing font-size next to font-weight anywhere else in this codebase, the element has a role and it is probably already here. WHY CLASSES AND NOT MORE VARIABLES Four custom properties per role would still be four declarations at every one of ~1000 call sites - the same drift, with longer names. And the `font:` shorthand is not an option: it resets font-feature-settings and font-kerning to initial, which breaks Arabic shaping, and it cannot carry letter-spacing. LINE-HEIGHT FALLS AS SIZE RISES Roughly lh = 1.05em + 8px for Latin. 15px -> 1.58, 24px -> 1.38, 48px -> 1.22. Arabic needs more: 1.14em + 9px. Both are expressed through --lh-a / --lh-b, which the language layer in mani-colors-ltr.css moves. A common belief says Arabic wants 1.8-2.0 line-height; that is inherited from mark-heavy Naskh faces. IBM Plex Sans Arabic does not, and 2.0 pulls a paragraph apart. ARABIC TRACKING IS ZERO, ALWAYS Handled once in mani-colors-ltr.css. Nothing here re-introduces it: every negative tracking below is inert in Arabic by design. ═══════════════════════════════════════════════════════════════ */ :root { /* Icons leave the type scale. An icon sized from --fs-lead is the reason .appx-card i and a paragraph were the same "role" in the old CSS. */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 32px; } /* Anything with no role at all still gets sane leading. :where() has ZERO specificity, so a single line-height anywhere in a page stylesheet wins - this can never fight existing CSS, it only fills silence. */ body :where(p, li, dd, blockquote) { line-height: calc(var(--lh-a, 1.05) * 1em + var(--lh-b, 8px)); } /* ── Display and page structure ─────────────────────────────── */ .t-display { font-size: var(--fs-display); font-weight: 800; line-height: calc(1.05 * var(--lh-k,1)); letter-spacing: -.03em; } .t-page-title { font-size: var(--fs-hero); font-weight: 800; line-height: calc(1.15 * var(--lh-k,1)); letter-spacing: -.025em; } .t-section-title { font-size: var(--fs-h1); font-weight: 800; line-height: calc(1.18 * var(--lh-k,1)); letter-spacing: -.025em; } .t-subsection-title { font-size: var(--fs-h2); font-weight: 700; line-height: calc(1.22 * var(--lh-k,1)); letter-spacing: -.022em; } .t-block-title { font-size: var(--fs-h3); font-weight: 700; line-height: calc(1.28 * var(--lh-k,1)); letter-spacing: -.02em; } /* ── Cards ────────────────────────────────────────────────────── The two roles that were most confused with each other. A card title and its subtitle must differ by BOTH size and weight, or the card reads as one lump. */ .t-card-title-lg { font-size: var(--fs-h4); font-weight: 700; line-height: calc(1.32 * var(--lh-k,1)); letter-spacing: -.018em; } .t-card-title { font-size: var(--fs-h5); font-weight: 700; line-height: calc(1.36 * var(--lh-k,1)); letter-spacing: -.015em; } .t-card-subtitle { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; letter-spacing: 0; } /* ── Running text ───────────────────────────────────────────── */ .t-lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; max-width: 62ch; } .t-body { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } .t-body-sm { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: .005em; } /* ── Labels and metadata ──────────────────────────────────────── These three share the small sizes, so they are told apart by WEIGHT and CASE rather than by size - which is the only way to keep a 13/12/11 band legible. */ .t-label { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; text-transform: uppercase; } .t-meta { font-size: var(--fs-xs); font-weight: 500; line-height: 1.45; letter-spacing: .01em; } .t-meta-strong { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; letter-spacing: .01em; } .t-badge { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; } .t-micro { font-size: var(--fs-micro); font-weight: 500; line-height: 1.40; letter-spacing: .02em; } /* ── Controls and tables ────────────────────────────────────── */ .t-button { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: .005em; } .t-button-lg { font-size: var(--fs-body); font-weight: 700; line-height: 1.20; letter-spacing: 0; } .t-nav { font-size: var(--fs-sm); font-weight: 600; line-height: 1.20; letter-spacing: 0; } .t-th { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.30; letter-spacing: .08em; text-transform: uppercase; } .t-td { font-size: var(--fs-sm); font-weight: 500; line-height: 1.50; letter-spacing: .005em; } .t-code { font-size: var(--fs-sm); font-weight: 400; line-height: 1.60; letter-spacing: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Uppercase does not exist in Arabic; text-transform is a no-op there, but the tracking that goes with it must not survive - already handled globally. */ /* ═══════════════════════════════════════════════════════════════ ADOPTION LAYER Everything below only applies to a page whose carries class="t". `html.t X` is specificity (0,2,0) and beats the (0,1,0) rules in the page stylesheets no matter what order the files load in - so a page can be moved onto the roles without editing its markup, and moved back by deleting one word in the shell. FIRST GROUP: the shared .appx-* app-page system, used by SEVEN pages at once (automation, erp-chat, pos, store, menu, delivery, booking). What it fixes: .appx-card h3 was --fs-lead (17) | .appx-biz-card h3 was --fs-h5 (20) - two card titles, two sizes, same job. .appx-hero-sub was --fs-h5 at weight 400 - a heading size doing a lead's work, which is why the hero read as two competing titles. .appx-card i was --fs-h4 - an ICON taking its size from a text role. ═══════════════════════════════════════════════════════════════ */ html.t .appx-h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .appx-h2 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .appx-hero-sub { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .appx-sub { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .appx-eyebrow { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .appx-badge { font-size: var(--fs-xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .appx-note { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } /* Both card titles land on one role. This is the single most visible change. */ html.t .appx-card h3, html.t .appx-biz-card h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .appx-card p, html.t .appx-biz-card p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } /* The icon stops being type. */ html.t .appx-card i { font-size: var(--icon-lg); line-height: 1; } /* SECOND GROUP: the infographics shared by the WhatsApp and chat pages. Written today straight onto the tokens, so they only need weight and leading pinned. */ html.t .ifg-eye { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .ifg-hd { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .ifg-pill { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .ifg-vs__t { font-size: var(--fs-2xs); font-weight: 800; line-height: 1.20; letter-spacing: .06em; } html.t .ifg-vs__l { font-size: var(--fs-sm); font-weight: 400; line-height: 1.90; letter-spacing: 0; } /* ═══════════════════════════════════════════════════════════════ THIRD GROUP: home (.hm-*), pricing (.pr-*) and the shell (.mnx-*) THE ONE PATTERN BEHIND ALL OF IT --fs-lead (17px) at weight 600 had become the site's default for everything: card titles, the paragraphs INSIDE those same cards, list items, feature values, FAQ questions. A card whose title and body are the same size and almost the same weight has no hierarchy - the eye has nothing to climb. That is the whole complaint, and this is the whole fix: card title -> 20 / 700 (--fs-h5) card body -> 15 / 400 (--fs-body) a 1.33x size step AND a 300-unit weight step, which is well past the minimum contrast either one alone would give. Body copy also stops being semi-bold: 600-weight running text is heavy in Latin and heavier in Arabic, where Plex's 600 already sits between Jakarta's 600 and 700. ICONS LEAVE THE TYPE SCALE ENTIRELY .hm-ecard .ec-icon was --fs-h2, .pr-inc-ico was --fs-h3, .mnx-nav-item i was --fs-body. An icon that resizes because someone retuned a heading is a bug waiting in the dark. ═══════════════════════════════════════════════════════════════ */ /* — card titles ————————————————————————————————— */ html.t .hm-mod-item h3, html.t .hm-integ-item h3, html.t .hm-ecard h3, html.t .hm-efeat h3, html.t .hm-capps-node h3, html.t .hm-capps-feat h3, html.t .hm-bnode h3, html.t .hm-bfeat h3, html.t .hm-jcard h3, html.t .hm-ben-item h3, html.t .pr-inc-item h3, html.t .pr-svc-h3, html.t .hm-app-card strong, html.t .hm-flow-body strong, html.t .hm-impl-title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } /* — the paragraphs inside those cards ——————————————— */ html.t .hm-ecard p, html.t .hm-efeat p, html.t .hm-capps-node p, html.t .hm-capps-feat p, html.t .hm-bnode p, html.t .hm-bfeat p, html.t .hm-jcard p, html.t .hm-ben-item p, html.t .hm-app-card p, html.t .hm-flow-body p, html.t .pr-inc-item p, html.t .pr-svc-p, html.t .hm-partner p, html.t .hm-impl-desc { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } /* — running text and lists ——————————————————————— */ html.t .pr-sec-p, html.t .pr-hero-sub, html.t .hm-hero-sub, html.t .pr-faq-inner { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .pr-feats li, html.t .pr-svc-list li, html.t .hm-impl-list li { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } /* — section titles ————————————————————————————— */ html.t .hm-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; } /* The emphasised half of a headline is the SAME headline. It carried its own font-size, so the h1 rendered at two sizes in one sentence. */ html.t .hm-hero h1 em, html.t .pr-hero-h1 em, html.t .appx-h1 em, html.t .hm-hero-sub em { font-size: inherit; line-height: inherit; } html.t .pr-hero-h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .pr-sec-h2, html.t .hm-partner h2 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .pr-faq-q { font-size: var(--fs-lead); font-weight: 700; line-height: 1.5; letter-spacing: 0; } /* — labels, badges, meta —————————————————————————— These sit in the 11-13px band where size alone cannot separate them, so they are told apart by weight and case instead. */ html.t .pr-eyebrow, html.t .mnx-nav-label, html.t .pr-vs-head span, html.t .pr-mod-lbl { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .pr-pop-text, html.t .pr-offer-text, html.t .hm-jtags span, html.t .sim-badge, html.t .hm-email-badge, html.t .hm-capps-badge, html.t .hm-backup-badge, html.t .hm-impl-badge { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .hm-hero-note, html.t .hm-impl-price-note, html.t .pr-all-note, html.t .mnx-user-role, html.t .mnx-bc-sep { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } /* — the billing toggle —————————————————————————— .pr-tog-lbl carried TWO font-size rules (--fs-lead, then --fs-h4 later in the file). It was reading as a heading, and once the scale grew it became one: "Monthly / Yearly" at 24px next to a switch. It is a CONTROL label. And the "2 months free" sticker is a fixed dashed box - its text must never wrap, or the box and its little arrow come apart. */ html.t .pr-tog-lbl { font-size: var(--fs-lead); font-weight: 700; line-height: 1; letter-spacing: 0; } /* The saving that used to float beside the toggle on a dashed label. It sits inside the Yearly segment now, so it is a chip, not a note. */ html.t .pr-knot-save { font-size: var(--fs-2xs); font-weight: 800; line-height: 1; letter-spacing: 0; } /* The segmented control in the hourglass knot gets its OWN size, one step under the toggle's old --fs-lead. Two reasons it cannot just inherit that role: it is now a segmented control rather than two words beside a switch, so the label is bounded by a capsule and reads larger than its point size; and it sits at the end of a drawing whose two source cards are set in --fs-lead, so a control at the same size competes with them instead of concluding them. Arabic needs no separate value here - --k-text already lifts every text token by 7% for Plex Arabic's shorter letter height, which is exactly the correction this needs. */ html.t .pr-hg__choice .pr-tog-lbl { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } /* — the shell —————————————————————————————————— */ html.t .mnx-nav-item { font-size: var(--fs-sm); font-weight: 600; line-height: 1; letter-spacing: 0; } html.t .mnx-breadcrumb{ font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .mnx-bc-sub { font-size: var(--fs-sm); font-weight: 400; line-height: 1; letter-spacing: 0; } html.t .mnx-top-btn, html.t .mnx-login-btn { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .mnx-footer-link, html.t .mnx-footer-left .copyright { font-size: var(--fs-sm); font-weight: 400; line-height: 1.6; } /* — icons stop being type ——————————————————————— */ html.t .hm-ecard .ec-icon, html.t .hm-efeat .ef-icon, html.t .hm-bnode .bn-icon, html.t .pr-inc-ico, html.t .hm-app-ico, html.t .hm-flow-ico { font-size: var(--icon-lg); line-height: 1; } html.t .mnx-nav-item i, html.t .pr-feat-l i, html.t .pr-faq-q i, html.t .hm-chk i, html.t .hm-impl-list li i, html.t .pr-svc-list li i { font-size: var(--icon-sm); line-height: 1; } html.t .pr-svc-ic { font-size: var(--icon-md); line-height: 1; } /* ═══════════════════════════════════════════════════════════════ FOURTH GROUP — the rest of the site, derived rather than hand-listed. The 827 selectors here were classified by a rule, not by eye: what token the old CSS used, its weight, its tracking, and what the selector calls itself (-icon, -badge, -btn, h3, ' p', -meta, ...). A rule that is right nine times out of ten is still wrong on eighty selectors, and eighty wrong roles look exactly like no system at all - so each one was then read back by hand, page by page, against the page it actually belongs to. 283 were corrected, 106 were rejected outright, and 4 more fell out (3 the review never reached, 1 already written by hand in the groups above). What is left is live. TWO RULES CAUGHT MOST OF THE ERRORS An icon is never type. It takes no text role and, above all, no font-weight: Font Awesome picks the FACE by weight, so a role that sets 700 on a mark asks for a face that was never loaded and the browser draws tofu. Icons get --icon-sm / --icon-md / --icon-lg and line-height 1, and nothing else. `html.t X` is specificity (0,2,0). A page's own `@media (max-width:600px)` rule is (0,1,0) and loses to it whatever the source order - so a selector that has a mobile step-down would be frozen at its desktop size on a phone. Those selectors declare weight and leading only, never font-size, and the page keeps its own responsive step. Nothing is parked any more: this layer is `html.t` like the three above it, nothing sets `t2`, and the class can be deleted wherever it is still written. ═══════════════════════════════════════════════════════════════ */ /* ── 404 ─────────────────────────────────────────────────── */ /* The glyph was the last raw clamp() on the site: clamp(96px, 18vw, 180px). It is the giant "404" numeral, which is the role --fs-display names, so it joins the scale and steps 180px -> 110px at 1440. Its -6px tracking becomes -.03em, the same figure the .t-display role uses. */ html.t .mnx-404-glyph { font-size: var(--fs-display); font-weight: 800; line-height: 1; letter-spacing: -.03em; } html.t .mnx-404-title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.011em; } html.t .mnx-404-suggestions-title { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .mnx-404-sub { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .mnx-404-link-chip { font-size: var(--fs-sm); font-weight: 600; line-height: 1.20; letter-spacing: 0; } html.t .mnx-404-btn-ghost, html.t .mnx-404-btn-primary { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .mnx-404-code { font-size: var(--fs-xs); font-weight: 400; line-height: 1.40; letter-spacing: 0; } html.t .mnx-404-link-chip i { font-size: var(--icon-sm); line-height: 1; } /* ── affiliates ──────────────────────────────────────────── */ /* The commission percentage is a giant number and the one thing in this hero the eye is meant to land on. Its 600px step was already in the breakpoints below; the base size never made it out of the page file because the rule group it sat in had an unterminated comment above it. */ html.t .aff-comm-pct { font-size: var(--fs-display); font-weight: 800; line-height: 1; letter-spacing: -.03em; } html.t .aff-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .aff-stat-val { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .aff-scenario-num { font-size: var(--fs-h3); font-weight: 800; line-height: 1; letter-spacing: -.01em; } html.t .aff-callout-title, html.t .aff-faq-q, html.t .aff-sec-title, html.t .aff-step-title, html.t .aff-why-card h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .aff-comm-sub { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; letter-spacing: 0; } html.t .aff-hero-sub, html.t .aff-body, html.t .aff-why-card p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .aff-faq-a-inner, html.t .aff-scenario-note, html.t .aff-scenario-text, html.t .aff-step-text, html.t .aff-table, html.t .aff-who-item p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .aff-step-dot { font-size: var(--fs-body); font-weight: 800; line-height: 1; letter-spacing: 0; } html.t .aff-callout-text, html.t .aff-scenario-result-text { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .aff-comm-eyebrow, html.t .aff-stat-label { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .aff-hero-meta span { font-size: var(--fs-sm); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .aff-sec-num, html.t .aff-faq-q i, html.t .aff-hero-meta i, html.t .aff-nav-pill i { font-size: var(--icon-sm); line-height: 1; } html.t .aff-who-num { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .aff-nav-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .aff-scenario-tag { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .aff-table thead th { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.30; letter-spacing: .08em; } html.t .aff-callout-icon, html.t .aff-why-icon { font-size: var(--icon-md); line-height: 1; } /* ── agreements ──────────────────────────────────────────── */ /* This page never had a group here: every size on it was still a raw rem or a raw clamp. 1.2rem -> --fs-lead (19.2 -> 19), 0.95rem -> --fs-sm (15.2 -> 15), clamp(28px,4vw,42px) -> --fs-h1, whose floor is the same 28px. */ html.t .fag-title { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.012em; } html.t .fag-c-title { font-size: var(--fs-h5); font-weight: 800; } html.t .fag-desc { font-size: var(--fs-lead); font-weight: 400; } html.t .fag-c-desc { font-size: var(--fs-sm); } html.t .fag-c-link { font-size: var(--fs-sm); font-weight: 700; } /* ── automation ──────────────────────────────────────────── */ html.t .au-connect h2 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .wv__c h4 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .au-connect p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .au-sim3-foot { font-size: var(--fs-lead); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .pg-automation .appx-second { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .wv__c p { font-size: var(--fs-sm); font-weight: 400; line-height: 1.85; letter-spacing: 0; } html.t .au-chip { font-size: var(--fs-xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } /* ── blog ────────────────────────────────────────────────── */ /* Three off-scale rem values: 1.05rem (16.8px) is --fs-body, and .9rem (14.4px) is the same off-scale figure --fs-sm already absorbed for .sl-cmp-table. */ html.t .blg-takeaways-title { font-size: var(--fs-body); font-weight: 800; } html.t .blg-inline-cta-text { font-size: var(--fs-body); font-weight: 700; line-height: 1.6; } html.t .blg-video-cap { font-size: var(--fs-sm); } html.t .blg-h1, html.t .blg-index-h1 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } html.t .blg-h2 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.01em; } html.t .blg-video-play { font-size: var(--icon-lg); line-height: 1; } html.t .blg-callout-body strong { font-size: var(--fs-body); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .blg-card-title, html.t .blg-h3, html.t .blg-related .blg-related-h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .blg-comment-meta strong { font-size: var(--fs-body); font-weight: 700; line-height: 1.40; letter-spacing: 0; } html.t .blg-index-sub, html.t .blg-card-desc, html.t .blg-empty { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .blg-intro { font-size: var(--fs-lead); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .blg-section p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.80; letter-spacing: 0; } html.t .blg-callout-body p, html.t .blg-comment-status, html.t .blg-comment-text, html.t .blg-step-item, html.t .blg-table { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .blg-input { font-size: var(--fs-body); font-weight: 400; line-height: 1.5; letter-spacing: 0; } html.t .blg-related-link { font-size: var(--fs-body); font-weight: 600; line-height: 1.5; letter-spacing: 0; } html.t .blg-step-item::before { font-size: var(--fs-sm); font-weight: 800; line-height: 1; letter-spacing: 0; } html.t .blg-card-category, html.t .blg-category-tag { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .blg-comment-meta span { font-size: var(--fs-xs); font-weight: 500; line-height: 1.40; letter-spacing: 0; } html.t .blg-card-meta, html.t .blg-meta-row { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .blg-copy-btn, html.t .blg-vote-btn { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .blg-code-lang { font-size: var(--fs-xs); font-weight: 700; line-height: 1.20; letter-spacing: .08em; } html.t pre.blg-code code { font-size: var(--fs-sm); font-weight: 400; line-height: 1.60; letter-spacing: 0; } html.t .blg-takeaways-title i { font-size: var(--icon-md); line-height: 1; } html.t .blg-callout-icon, html.t .blg-copy-btn i, html.t .blg-related-link i { font-size: var(--icon-sm); line-height: 1; } /* ── blog+compare-erp+integrations+pricing+recharge+seo-landing ─── */ html.t .mni-btn, html.t .pg-recharge .mni-btn { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } /* ── compare-erp ─────────────────────────────────────────── */ html.t .cp-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .cp-sh { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .cp-cost-num, html.t .cp-vd-num { font-size: var(--fs-h2); font-weight: 700; line-height: 1.20; letter-spacing: -.01em; } html.t .cp-mig-body h3, html.t .cp-pillar h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .cp-hero-sub, html.t .cp-sp { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .cp-cost-logo { font-size: var(--fs-lead); font-weight: 800; line-height: 1; } html.t .cp-faq-q span { font-size: var(--fs-lead); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .cp-mig-icon-wrap, html.t .cp-callout-icon { font-size: var(--icon-md); line-height: 1; } html.t .cp-callout-body, html.t .cp-cost-breakdown li, html.t .cp-cost-num span, html.t .cp-faq-a p, html.t .cp-mig-body p, html.t .cp-pillar p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .cp-col { font-size: var(--fs-sm); font-weight: 400; line-height: 1.50; letter-spacing: 0; } html.t .cp-col--feat { font-size: var(--fs-sm); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .cp-cost-brand span { font-size: var(--fs-body); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .cp-cost-verdict { font-size: var(--fs-xs); font-weight: 800; line-height: 1.30; letter-spacing: .12em; } html.t .cp-cs-p { font-size: var(--fs-body); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .cp-cs-u { font-size: var(--fs-body); font-weight: 400; line-height: 1.50; letter-spacing: 0; } html.t .cp-eyelet, html.t .cp-cost-winner-ribbon { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .cp-cost-note, html.t .cp-cs-note { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .cp-head .cp-col { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.30; letter-spacing: .08em; } html.t .cp-vd-txt { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; letter-spacing: .1em; } html.t .cp-mig-num { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .cp-cost-tag, html.t .cp-pillar-tags span { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .cp-pillar-num { font-size: var(--fs-hero); font-weight: 800; line-height: 1; letter-spacing: -.02em; } html.t .cp-cost-breakdown li i, html.t .cp-faq-icon, html.t .cp-win-icon { font-size: var(--icon-sm); line-height: 1; } /* ── contact ─────────────────────────────────────────────── */ /* A form control inherits nothing from the page: without a size of its own an input falls back to the UA's 13.33px, which is why this one is declared. */ html.t .ct-input { font-size: var(--fs-body); font-weight: 400; } html.t .ct-h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .ct-error-title, html.t .ct-success-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .ct-card .ct-info-title, html.t .ct-card-head .ct-card-title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .ct-card-sub, html.t .ct-social-sub { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; letter-spacing: 0; } html.t .ct-hero-sub, html.t .ct-error-msg, html.t .ct-success-msg { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .ct-social, html.t .ct-card-icon, html.t .ct-info-icon, html.t .ct-wa-half-icon { font-size: var(--icon-sm); line-height: 1; } html.t .ct-wa-half-role { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .ct-browse-key, html.t .ct-info-text { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .ct-browse-val { font-size: var(--fs-sm); font-weight: 700; line-height: 1.65; letter-spacing: 0; } html.t .ct-error-reset, html.t .ct-success-reset { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .ct-label { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .ct-social-label { font-size: var(--fs-body); font-weight: 700; line-height: 1.45; letter-spacing: 0; } html.t .ct-wa-half-num, html.t .ct-error-badge, html.t .ct-success-badge { font-size: var(--fs-sm); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .ct-wa-half-cta { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .ct-browse-code { font-size: var(--fs-sm); font-weight: 400; line-height: 1.60; letter-spacing: 0; } /* ── customization ───────────────────────────────────────── */ html.t .cz-pipe-arrow { font-size: var(--icon-md); line-height: 1; } html.t .cz-pipe-node strong { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .cz-pipe-node span { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .cz-pipe-node i { font-size: var(--icon-lg); line-height: 1; } /* ── erp-chat ────────────────────────────────────────────── */ html.t .pgc-half h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .pgc-poll-q { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .pgc-poll-sub { font-size: var(--fs-2xs); font-weight: 500; line-height: 1.40; letter-spacing: 0; } html.t .pgc-col-head { font-size: var(--fs-lead); font-weight: 800; line-height: 1.35; letter-spacing: -.005em; } html.t .pgc-after p { font-size: var(--fs-body); font-weight: 600; line-height: 1.75; letter-spacing: 0; } html.t .pgc-before p, html.t .pgc-half > p, html.t .pgc-half li { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .pgc-cmp-list b { font-size: var(--fs-body); font-weight: 700; line-height: 1.45; letter-spacing: -.005em; } html.t .pgc-rcx-meta .cell b, html.t .pgc-wid-top b { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .pgc-rcx-t b { font-size: var(--fs-body); font-weight: 800; line-height: 1.35; letter-spacing: -.005em; } html.t .pgc-searchbar span { font-size: var(--fs-body); font-weight: 600; line-height: 1.40; letter-spacing: 0; } html.t .pgc-cmp-list span, html.t .pgc-reader-note { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .pgc-lv-info b, html.t .pgc-res-t { font-size: var(--fs-sm); font-weight: 700; line-height: 1.40; letter-spacing: 0; } html.t .pgc-pct { font-size: var(--fs-sm); font-weight: 800; line-height: 1.20; letter-spacing: 0; } html.t .pgc-wb { font-size: var(--fs-sm); font-weight: 400; line-height: 1.45; letter-spacing: 0; } html.t .pgc-wb-field span { font-size: var(--fs-sm); font-weight: 600; line-height: 1.40; letter-spacing: 0; } html.t .pgc-flag { font-size: var(--fs-2xs); font-weight: 800; line-height: 1; letter-spacing: .06em; } html.t .pgc-inbox b { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .pgc-plabel { font-size: var(--fs-sm); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .pgc-res-h { font-size: var(--fs-2xs); font-weight: 800; line-height: 1.30; letter-spacing: .06em; } html.t .cv__doc, html.t .cv__field, html.t .cv__msg, html.t .cv__web, html.t .pgc-wid-input .ph { font-size: var(--fs-xs); font-weight: 500; line-height: 1.40; letter-spacing: 0; } html.t .cv__who { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .pgc-live { font-size: var(--fs-xs); font-weight: 800; line-height: 1.30; letter-spacing: 0; } html.t .pgc-rcx-foot, html.t .pgc-res-amt { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .pgc-rcx-meta .cell span, html.t .pgc-inbox span, html.t .pgc-poll-foot, html.t .pgc-res-t small { font-size: var(--fs-2xs); font-weight: 500; line-height: 1.35; letter-spacing: 0; } html.t .pgc-wb-field .cc { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: 0; } html.t .pgc-lv-count, html.t .pgc-lv-loc { font-size: var(--fs-2xs); font-weight: 600; line-height: 1.35; letter-spacing: 0; } html.t .pgc-lv-info span, html.t .pgc-rcx-t small, html.t .pgc-wid-top span { font-size: var(--fs-2xs); font-weight: 400; line-height: 1.35; letter-spacing: 0; } html.t .pgc-mk, html.t .pgc-half li i { font-size: var(--icon-sm); line-height: 1; } html.t .pgc-preason { font-size: var(--fs-2xs); font-weight: 400; line-height: 1.45; letter-spacing: 0; } html.t .pgc-tag { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .cv__av { font-size: var(--fs-micro); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .cv__role, html.t .cv__then { font-size: var(--fs-micro); font-weight: 500; line-height: 1.35; letter-spacing: 0; } html.t .pgc-lv-start { font-size: var(--fs-micro); font-weight: 800; line-height: 1; letter-spacing: 0; } html.t .cv__btn { font-size: var(--fs-micro); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .pgc-reader-toggle button { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } /* ── erpnext ─────────────────────────────────────────────── */ html.t .erp-hero-h2 { font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .erp-stat-val { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } html.t .erp-kpi strong { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .erp-dev-card h3, html.t .erp-mod-card h3, html.t .erp-tax-card h3, html.t .erp-what-card h3, html.t .erp-why-card h4, html.t .erp-why-panel h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .erp-title { font-weight: 700; line-height: 1.22; letter-spacing: -.022em; } html.t .erp-sub, html.t .erp-dev-card p, html.t .erp-hero-lead, html.t .erp-mod-card p, html.t .erp-tax-card p, html.t .erp-what-card p, html.t .erp-why-card p, html.t .erp-why-panel p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .erp-kpi span, html.t .erp-trust { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .erp-label, html.t .erp-stat-lbl { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .erp-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .erp-tax-icon, html.t .erp-what-icon { font-size: var(--icon-md); line-height: 1; } html.t .erp-mod-icon, html.t .erp-why-icon { font-size: var(--icon-sm); line-height: 1; } /* ── faq ─────────────────────────────────────────────────── */ html.t .ffq-hd h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .ffq-q { font-size: var(--fs-lead); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .ffq-sec-title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .ffq-a-inner { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .ffq-hd p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .ffq-q i { font-size: var(--icon-sm); line-height: 1; } /* ── globals ─────────────────────────────────────────────── */ /* The shared platform-apps strip (fragments/shared/_platform_apps.html). */ html.t .plat-h2 { font-size: var(--fs-h3); font-weight: 800; } html.t .au-h2, html.t .hm-sh, html.t .impl-sh, html.t .mb-sh, html.t .mni-sh, html.t .mp-sh { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .pay-cur-flag { font-size: var(--icon-md); line-height: 1; } html.t .pay-cur-name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; letter-spacing: 0; } html.t .pay-name, html.t .pay-row .pay-name { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .pay-local-sub, html.t .pay-sub, html.t .hm-sp, html.t .impl-sp, html.t .in-sp, html.t .mb-sp, html.t .mni-sp { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .mkt-note-inner, html.t .pay-foot, html.t .pay-strip { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .xlnk-a, html.t .plat-chip, html.t .mni-btn--text { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .hm-eye, html.t .impl-eye, html.t .mb-eye, html.t .mni-eye, html.t .plat-eye, html.t .xlnk-t, html.t .au-eyebrow { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .pay-note, html.t .pay-row .pay-note { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .mni-nav-pill, html.t .mni-btn--sm { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .pay-badge { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .mni-btn--lg { font-size: var(--fs-h5); font-weight: 800; line-height: 1; letter-spacing: 0; } html.t .pay-cur-code { font-size: var(--fs-body); font-weight: 800; line-height: 1.20; letter-spacing: 0; } html.t .mkt-note-inner > i, html.t .pay-foot i, html.t .pay-ico, html.t .pay-strip i { font-size: var(--icon-sm); line-height: 1; } /* ── home ────────────────────────────────────────────────── */ html.t .app-modal-close { font-size: var(--fs-h3); line-height: 1; } html.t .hm-bstat .bs-num { font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .hm-eplus, html.t .hm-barrow, html.t .hm-capps-arrow { font-size: var(--icon-md); line-height: 1; } html.t .app-modal-header h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .hm-sim-acard-title { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .hm-sim-summary-title { font-size: var(--fs-body); font-weight: 700; line-height: 1.40; letter-spacing: 0; } html.t .hm-sim-acard-sub { font-size: var(--fs-xs); font-weight: 400; line-height: 1.45; letter-spacing: 0; } html.t .hm-sim-disclaimer { font-size: var(--fs-lead); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .app-modal-header p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .hm-jcard .jt { font-size: var(--fs-body); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .hm-jnum { font-size: var(--fs-body); font-weight: 800; line-height: 1; letter-spacing: 0; } html.t .hm-role { font-size: var(--fs-body); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .hm-sim-custom-go, html.t .hm-sim-restart, html.t .hm-sim-ind-btn, html.t .hm-sim-or button, html.t .sim-deploy-btn { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .sim-select, html.t .sim-step-text { font-size: var(--fs-body); font-weight: 400; line-height: 1.40; letter-spacing: 0; } html.t .sim-success-msg { font-size: var(--fs-body); font-weight: 700; line-height: 1.60; letter-spacing: 0; } html.t .hm-sim-bubble { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .hm-sim-custom-inp { font-size: var(--fs-sm); font-weight: 400; line-height: 1.40; letter-spacing: 0; } html.t .hm-bstat .bs-label { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: 0; } html.t .sim-label { font-size: var(--fs-sm); font-weight: 700; line-height: 1.40; letter-spacing: 0; } html.t .hm-sim-emailrow, html.t .hm-sim-or { font-size: var(--fs-xs); font-weight: 500; line-height: 1.40; letter-spacing: 0; } html.t .hm-sim-sv { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .hm-sim-check { font-size: var(--fs-2xs); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .hm-sim-modtag { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .hm-sim-email-dept, html.t .hm-sim-sk { font-size: var(--fs-micro); font-weight: 500; line-height: 1.35; letter-spacing: 0; } html.t .hm-sim-email-ok { font-size: var(--fs-micro); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .sim-step-icon { font-size: var(--icon-sm); line-height: 1; } /* ── home+integrations ───────────────────────────────────── */ html.t .in-ecard .ec-icon { font-size: var(--icon-lg); line-height: 1; } /* ── how ─────────────────────────────────────────────────── */ html.t .hom-hero h1 { font-weight: 800; line-height: 1.12; letter-spacing: -.02em; } html.t .hom-stat-val { font-size: var(--fs-h2); font-weight: 700; line-height: 1.20; letter-spacing: -.01em; } html.t .hom-play-circle { font-size: var(--icon-md); line-height: 1; } html.t .hom-cmp-card-name, html.t .hom-mod-item h3, html.t .hom-pain-card h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .hom-title { font-weight: 700; line-height: 1.22; letter-spacing: -.022em; } html.t .hom-hero-sub, html.t .hom-sub, html.t .hom-trust { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .hom-mobile-p, html.t .hom-pain-card p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .hom-cmp-side-text { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .hom-cmp-side-label, html.t .hom-label, html.t .hom-play-label, html.t .hom-stat-lbl { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t [dir="rtl"] .hom-label, html.t .hom-chip { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .hom-mobile-badge { font-size: var(--fs-body); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .hom-pain-tag { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .hom-cmp-cta-text { font-size: var(--fs-body); font-weight: 600; line-height: 1.60; letter-spacing: 0; } html.t .hom-chip i, html.t .hom-cmp-icon { font-size: var(--icon-sm); line-height: 1; } /* ── implementation ──────────────────────────────────────── */ html.t .impl-hero h1 { font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .impl-hero-stat .hs-num { font-weight: 800; line-height: 1; letter-spacing: -.01em; } html.t .impl-ai-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .impl-ai-step-content strong { font-size: var(--fs-body); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .impl-card-title, html.t .impl-jcard h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .impl-hero-sub { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .impl-ai-desc, html.t .impl-card-desc, html.t .impl-jcard p, html.t .impl-list li { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .impl-compare-cell { line-height: 1.75; } html.t .impl-compare-cell .ic-yes, html.t .impl-list li i { font-size: var(--icon-sm); line-height: 1; } html.t .impl-jnum { font-size: var(--fs-body); font-weight: 800; line-height: 1; } html.t .impl-compare-row--head .impl-compare-cell { font-weight: 700; line-height: 1.30; letter-spacing: .08em; } html.t .impl-jcard .impl-jt, html.t .impl-price-note { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .impl-hero-stat .hs-label { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .impl-ai-step-content span { font-size: var(--fs-xs); font-weight: 500; line-height: 1.40; letter-spacing: 0; } html.t .impl-badge { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .impl-jtags span { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } /* ── integrations ────────────────────────────────────────── */ html.t .in-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .in-sh { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .sim-modal h2, html.t .in-app-card h4, html.t .in-ecard h3, html.t .in-feat h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .in-orb-satellite { font-size: var(--icon-lg); line-height: 1; } html.t .in-dir-category h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .in-hero-sub { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .in-app-card p, html.t .in-chk, html.t .in-ecard p, html.t .in-feat p, html.t .in-sim-cz p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .sim-modal-select { font-size: var(--fs-body); font-weight: 600; line-height: 1.20; letter-spacing: 0; } html.t .in-eye { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } /* .in-badge shipped letter-spacing: 2.5px beside text-transform: uppercase. px tracking does not scale with the size, and tracking is the one thing that must never reach Arabic. .12em is the same optical fit at --fs-xs, is what every other uppercase label here uses, and is already forced to 0 in Arabic by the global rule in mani-colors-ltr.css. The uppercase travels with it. */ html.t .in-badge { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; text-transform: uppercase; } html.t .sim-modal p { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .sim-toast { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .sim-modal-btn { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .in-chk i { font-size: var(--icon-sm); line-height: 1; } html.t .sim-modal-icon { font-size: var(--icon-md); line-height: 1; } /* ── integrations+marketplace ────────────────────────────── */ html.t .in-app-card .app-icon, html.t .mp-app-card .app-icon { font-size: var(--icon-lg); line-height: 1; } html.t .mp-app-card--sol .app-icon i { font-size: var(--icon-md); line-height: 1; } /* ── learn ───────────────────────────────────────────────── */ html.t .frag-learn .vd-hero-h1 { font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .frag-learn .vd-card-body h3, html.t .frag-learn .vd-cat-card-title, html.t .frag-learn .vd-modal-title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .frag-learn .vd-hero-sub { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .frag-learn .vd-card-body p, html.t .frag-learn .vd-empty p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .frag-learn .vd-drop-item, html.t .frag-learn .vd-stat-item { font-size: var(--fs-body); font-weight: 600; line-height: 1.20; letter-spacing: 0; } html.t .frag-learn .vd-modal-close, html.t .frag-learn .vd-filter-chevron, html.t .frag-learn .vd-cat-card-icon, html.t .frag-learn .vd-drop-item i, html.t .frag-learn .vd-lang-btn i, html.t .frag-learn .vd-play-btn i, html.t .frag-learn .vd-search-clear, html.t .frag-learn .vd-search-icon { font-size: var(--icon-sm); line-height: 1; } html.t .frag-learn .vd-search-input { font-size: var(--fs-body); font-weight: 400; line-height: 1.20; letter-spacing: 0; } html.t .frag-learn .vd-back-bar .vd-results-count, html.t .frag-learn .vd-results-count { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .frag-learn .vd-current-cat { font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .frag-learn .vd-eyebrow { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .frag-learn .vd-cat-card-count, html.t .frag-learn .vd-duration { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; letter-spacing: .01em; } html.t .frag-learn .vd-cat-tag, html.t .frag-learn .vd-drop-count, html.t .frag-learn .vd-featured-ribbon { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .frag-learn .vd-lang-badge { font-size: var(--fs-micro); font-weight: 800; line-height: 1.20; letter-spacing: .06em; } html.t .frag-learn .vd-back-btn, html.t .frag-learn .vd-lang-btn, html.t .frag-learn .vd-load-more-btn, html.t .frag-learn .vd-watch-btn { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .frag-learn .vd-filter-btn { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } /* Both thumb states hold one and nothing else, so they leave the text scale: --fs-h3/--fs-h2 (28/32px) become --icon-lg. No font-weight - Font Awesome selects its face by weight and a weight here draws a tofu box. */ html.t .frag-learn .vd-cat-thumb-blank, html.t .frag-learn .vd-cat-thumb-overlay, html.t .frag-learn .vd-empty i { font-size: var(--icon-lg); line-height: 1; } /* ── legal ───────────────────────────────────────────────── */ html.t .lgl-hero h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } html.t .lgl-stat-val { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } html.t .lgl-callout-title, html.t .lgl-step-title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.45; letter-spacing: 0; } html.t .lgl-sec-title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .lgl-body { font-size: var(--fs-lead); font-weight: 400; line-height: 1.80; letter-spacing: 0; } html.t .lgl-callout-text, html.t .lgl-hero-meta { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .lgl-list li, html.t .lgl-step-text, html.t .lgl-table, html.t .lgl-toc-list a { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .lgl-contact-value { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .lgl-step-dot, html.t .lgl-sec-num { font-size: var(--fs-sm); font-weight: 800; line-height: 1; letter-spacing: 0; } html.t .lgl-contact-label, html.t .lgl-stat-label, html.t .lgl-toc-label { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .lgl-toc-num { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .lgl-badge { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .lgl-nav-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .lgl-table thead th { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.30; letter-spacing: .08em; } html.t .lgl-callout-icon, html.t .lgl-contact-icon, html.t .lgl-hero-meta i, html.t .lgl-nav-pill i { font-size: var(--icon-sm); line-height: 1; } /* ── marketplace ─────────────────────────────────────────── */ html.t .mp-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .mp-dir-category h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .mob-app-ic { font-size: var(--icon-md); line-height: 1; } html.t .mp-app-card h4, html.t .mp-feat h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .mp-store-title, html.t .mp-store .mob-tab { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .mp-hero-sub, html.t .mp-chk, html.t .mp-sp { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .mob-app-go, html.t .mp-store .mob-app-ic, html.t .mp-chk i { font-size: var(--icon-sm); line-height: 1; } html.t .mob-app-tx .mob-app-nm { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .mob-empty, html.t .mp-app-card p, html.t .mp-feat p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .mob-tab { font-size: var(--fs-body); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .mob-app-tx p { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .mp-eye { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .mp-store .mob-app-tx p { font-size: var(--fs-xs); font-weight: 400; line-height: 1.45; letter-spacing: 0; } html.t .mob-soon, html.t .mob-sw { font-size: var(--fs-xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } /* ── partners ────────────────────────────────────────────── */ html.t .ptr-h1 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; } html.t .ptr-card h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .ptr-sub { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .ptr-card p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .ptr-card-ai-label { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .ptr-badge, html.t .ptr-card-ai-pills span, html.t .ptr-pill { font-size: var(--fs-xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .ptr-btn-join { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .ptr-card-ai-pills span i, html.t .ptr-pill i { font-size: var(--icon-sm); line-height: 1; } /* ── partnership ─────────────────────────────────────────── */ html.t .prt-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .prt-callout-title, html.t .prt-model-title, html.t .prt-sec-title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .prt-model-sub { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; letter-spacing: 0; } html.t .prt-body, html.t .prt-callout-text, html.t .prt-fit-card p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .prt-list li { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .prt-model-link, html.t .prt-nav-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .prt-model-type { font-size: var(--fs-xs); font-weight: 700; line-height: 1.40; letter-spacing: .08em; } html.t .prt-hero-meta span, html.t .prt-model-num { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .prt-sec-num { font-size: var(--fs-sm); font-weight: 800; line-height: 1; } html.t .prt-model-icon { font-size: var(--icon-md); line-height: 1; } html.t .prt-callout-icon, html.t .prt-fit-icon, html.t .prt-hero-meta i, html.t .prt-nav-pill i { font-size: var(--icon-sm); line-height: 1; } /* ── pricing ─────────────────────────────────────────────── */ /* The flag behind a country card head is a GLYPH, not text: the content is a flag emoji at opacity .1, masked and absolutely placed. It takes a size and a leading and nothing else - a font-weight on a glyph is what draws tofu. --icon-* is the wrong scale for it: that scale tops out at 32px and this is a ~110px watermark, so it keeps --fs-display, which is what it rendered at. mani-globals-rtl.css declared the same size a second time; that copy is gone and the RTL rule now only flips which side the flag hangs off. */ html.t .pr-card-head.has-flag::before { font-size: var(--fs-display); line-height: 1; } html.t .frag-pricing .pr-hero-h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .frag-pricing .pr-sec-h2 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .frag-pricing .pr-price { font-size: var(--fs-h2); font-weight: 600; line-height: 1; letter-spacing: -.01em; } html.t .frag-pricing .pr-pkg-name { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: .06em; } html.t .frag-pricing .pr-sla-banner-h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .frag-pricing .pr-curr { font-size: var(--fs-h5); font-weight: 800; line-height: 1; } html.t .frag-pricing .pr-inc-item h3, html.t .frag-pricing .pr-svc-h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .frag-pricing .pr-period { font-size: var(--fs-h5); font-weight: 700; line-height: 1; } html.t .frag-pricing .pr-pkg-sub { font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; letter-spacing: 0; } html.t .frag-pricing .pr-feat-v { font-size: var(--fs-body); font-weight: 700; line-height: 1.75; letter-spacing: 0; } html.t .frag-pricing .pr-feats li, html.t .frag-pricing .pr-inc-item p, html.t .frag-pricing .pr-sla-banner-p, html.t .frag-pricing .pr-svc-list li, html.t .frag-pricing .pr-svc-p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .frag-pricing .pr-tooltip, html.t .frag-pricing .pr-faq-q i, html.t .frag-pricing .pr-feat-l i, html.t .frag-pricing .pr-svc--blue .pr-svc-list li i, html.t .frag-pricing .pr-svc--green .pr-svc-list li i { font-size: var(--icon-sm); line-height: 1; } html.t .frag-pricing .pr-vs-row span:first-child { font-size: var(--fs-body); font-weight: 600; line-height: 1.50; letter-spacing: 0; } html.t .frag-pricing .pr-all-note { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .frag-pricing .pr-vs-row span { font-size: var(--fs-sm); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .frag-pricing .pr-eyebrow, html.t .frag-pricing .pr-mod-lbl, html.t .frag-pricing .pr-vs-head span { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .frag-pricing .pr-mobile-badges span { font-size: var(--fs-sm); font-weight: 600; line-height: 1.20; letter-spacing: 0; } html.t .frag-pricing .pr-mod-chips span, html.t .frag-pricing .pr-offer-text, html.t .frag-pricing .pr-pop-text { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .frag-pricing .pr-users-badge { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .frag-pricing .pr-sla-btn { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .frag-pricing .pr-inc-ico { font-size: var(--icon-lg); line-height: 1; } html.t .frag-pricing .pr-sla-banner-h4 i { font-size: var(--icon-md); line-height: 1; } /* ── recharge ────────────────────────────────────────────── */ html.t .rch-info h1 { font-weight: 700; line-height: 1.20; letter-spacing: -.015em; } html.t .rch-card-header h2 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; } html.t .rch-info p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .rch-summary-row.rch-sum-total .rch-sum-value { font-size: var(--fs-lead); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .rch-card-header p, html.t .rch-feature, html.t .rch-summary-row { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .rch-input { font-size: var(--fs-body); font-weight: 600; line-height: 1.20; letter-spacing: 0; } html.t .rch-alert, html.t .rch-security-note, html.t .rch-wallet-status { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .rch-eyebrow { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .rch-label { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .rch-step-label { font-size: var(--fs-xs); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .rch-summary-row.rch-sum-total .rch-sum-label { font-size: var(--fs-body); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .rch-hint, html.t .rch-nonrefund { font-size: var(--fs-xs); font-weight: 500; line-height: 1.40; letter-spacing: 0; } html.t .rch-step-num { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .rch-check-btn { font-size: var(--fs-xs); font-weight: 800; line-height: 1; letter-spacing: 0; } html.t .rch-amount-btn, html.t .rch-paypal-btn { font-size: var(--fs-body); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .rch-alert i, html.t .rch-eyebrow i, html.t .rch-feature-icon i, html.t .rch-input-wrap i, html.t .rch-nonrefund i, html.t .rch-security-note i, html.t .rch-wallet-status i { font-size: var(--icon-sm); line-height: 1; } /* ── seo-landing ─────────────────────────────────────────── */ /* The exit popup's badge holds one emoji, so it moves onto the icon scale. line-height STAYS 80px: that is what centres the glyph in its 80px circle, and the usual line-height:1 would drop it to the top of the badge. */ html.t .mnx-popup-icon { font-size: var(--icon-lg); line-height: 80px; } html.t .frag-seo-landing .sl-hero-h1 { font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .frag-seo-landing .sl-internal-h2, html.t .mnx-popup-h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.30; letter-spacing: -.005em; } html.t .frag-seo-landing .sl-sec-h2 { font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .mnx-popup-close { font-size: var(--fs-h3); line-height: 1; } html.t .frag-seo-landing .sl-faq-q { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .frag-seo-landing .sl-hero-sub, html.t .frag-seo-landing .sl-sec-sub, html.t .frag-seo-landing .sl-faq-inner, html.t .frag-seo-landing .sl-pain-p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .frag-seo-landing .sl-card-ours, html.t .frag-seo-landing .sl-stack-item { font-size: var(--fs-body); font-weight: 700; line-height: 1.60; letter-spacing: 0; } html.t .frag-seo-landing .sl-card-theirs, html.t .frag-seo-landing .sl-flow-note, html.t .frag-seo-landing .sl-flow-step, html.t .frag-seo-landing .sl-hero-unique, html.t .frag-seo-landing .sl-keep-item, html.t .frag-seo-landing .sl-local-item, html.t .frag-seo-landing .sl-partner-item, html.t .frag-seo-landing .sl-scope-item, html.t .frag-seo-landing .sl-scope-note, html.t .frag-seo-landing .sl-stack-note, html.t .mnx-popup-p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .frag-seo-landing .sl-flow-num { font-size: var(--fs-body); font-weight: 800; line-height: 1; } html.t .frag-seo-landing .sl-proof-item { font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .frag-seo-landing .sl-trust-item { font-size: var(--fs-sm); font-weight: 600; line-height: 1.20; letter-spacing: 0; } html.t .mnx-popup-spam { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .frag-seo-landing .sl-eyebrow { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .frag-seo-landing .sl-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .frag-seo-landing .sl-keep-item > i, html.t .frag-seo-landing .sl-local-item > i, html.t .frag-seo-landing .sl-partner-item > i, html.t .frag-seo-landing .sl-proof-item i, html.t .frag-seo-landing .sl-scope-item > i, html.t .frag-seo-landing .sl-stack-item > i { font-size: var(--icon-sm); line-height: 1; } /* ── shell ───────────────────────────────────────────────── */ /* .mnx-promo-banner was declared twice in mani-shell-ltr.css - --fs-sm first, --fs-body twenty-eight lines later. Same selector, same specificity, same file, so the later one had always won and the banner was --fs-body; the only thing the first rule still contributed was the weight. Both are here now, which is also why the two rules cannot drift apart again. */ html.t .mnx-promo-banner { font-size: var(--fs-body); font-weight: 600; } /* The page loader holds three CSS-drawn dots, not a glyph, so it does NOT take an --icon-* token - there is no text in it for a size to reach. The token it shipped with is kept rather than reinvented. */ html.t .mnx-loader { font-size: var(--fs-h4); } html.t .mnx-curr-flag, html.t .mnx-promo-close, html.t span#mnxCurrFlag, html.t .mnx-drawer-close, html.t .mnx-rail-btn { font-size: var(--icon-md); line-height: 1; } html.t .mnx-drawer-title { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .mnx-user-name { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: 0; } html.t .mnx-curr-opt { font-size: var(--fs-sm); font-weight: 600; line-height: 1.20; letter-spacing: 0; } html.t .mnx-top-alert, html.t .mnx-promo-cta { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .mnx-curr-opt .curr-symbol { font-size: var(--fs-xs); font-weight: 500; line-height: 1.40; letter-spacing: 0; } html.t #mnxCurrChevron, html.t .mnx-logout-btn, html.t .mnx-toggle-btn, html.t .mnx-promo-cta i { font-size: var(--icon-sm); line-height: 1; } /* ── status ──────────────────────────────────────────────── */ html.t .pg-status .stx-empty-t { font-size: var(--fs-lead); font-weight: 700; line-height: 1.45; letter-spacing: 0; } html.t .pg-status .stx-inc-t { font-size: var(--fs-lead); font-weight: 700; line-height: 1.40; letter-spacing: 0; } html.t .pg-status .stx-empty-n, html.t .pg-status .stx-inc-sum { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .pg-status .stx-tbl { font-size: var(--fs-body); font-weight: 400; line-height: 1.5; letter-spacing: 0; } html.t .pg-status .stx-tbl-cap { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .pg-status .stx-inc-date { font-size: var(--fs-xs); font-weight: 500; line-height: 1; letter-spacing: 0; } html.t .pg-status .stx-inc-badge { font-size: var(--fs-xs); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .pg-status .stx-tbl thead th { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .pg-status .stx-empty i { font-size: var(--icon-lg); line-height: 1; } /* ── support ─────────────────────────────────────────────── */ html.t .sup-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .sup-stat-val { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .sup-callout-title, html.t .sup-sec-title, html.t .sup-step-title, html.t .sup-cta-box h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .sup-faq-q { font-size: var(--fs-lead); font-weight: 700; line-height: 1.50; letter-spacing: 0; } html.t .sup-body, html.t .sup-callout-text, html.t .sup-cta-box p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .sup-faq-a-inner, html.t .sup-level-desc, html.t .sup-list li, html.t .sup-step-text { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .sup-channel-value { font-size: var(--fs-body); font-weight: 700; line-height: 1.40; letter-spacing: 0; } html.t .sup-table { font-size: var(--fs-sm); font-weight: 400; line-height: 1.50; letter-spacing: 0; } html.t .sup-toc-list a { font-size: var(--fs-sm); font-weight: 600; line-height: 1.30; letter-spacing: 0; } html.t .sup-channel-arrow, html.t .sup-toc-num, html.t .sup-callout-icon, html.t .sup-channel-icon, html.t .sup-contact-icon, html.t .sup-faq-q i, html.t .sup-hero-meta i, html.t .sup-nav-pill i { font-size: var(--icon-sm); line-height: 1; } html.t .sup-channel-note, html.t .sup-level-example { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .sup-contact-value { font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; letter-spacing: 0; } html.t .sup-step-dot { font-size: var(--fs-sm); font-weight: 700; line-height: 1; } html.t .sup-channel-label, html.t .sup-contact-label, html.t .sup-stat-label, html.t .sup-toc-label { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .sup-hero-meta span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .sup-sec-num { font-size: var(--icon-md); line-height: 1; } html.t .sup-badge { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .sup-nav-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .sup-table thead th { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.30; letter-spacing: .08em; } /* ── use-cases ───────────────────────────────────────────── */ html.t .uc-h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .uc-sec-h2 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .uc-card-co-name, html.t .uc-card-title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .uc-card-metric strong { font-size: var(--fs-h5); font-weight: 800; line-height: 1; letter-spacing: -.01em; } html.t .uc-card-co-sub { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; letter-spacing: 0; } html.t .uc-hero-sub, html.t .uc-card-result, html.t .uc-sec-p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .uc-row p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .uc-card-country { font-size: var(--fs-sm); font-weight: 400; line-height: 1.65; letter-spacing: 0; } html.t .uc-card-metric span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: .08em; } html.t .uc-card-sector { font-weight: 700; line-height: 1.30; letter-spacing: .08em; } html.t .uc-verified { font-size: var(--fs-2xs); line-height: 1; } html.t .uc-eyebrow, html.t .uc-row-lbl { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .uc-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .uc-filter-btn { font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: 0; } html.t .uc-card-result i, html.t .uc-pill i { font-size: var(--icon-sm); line-height: 1; } /* ── what-is-managely-erp ────────────────────────────────── */ html.t .plt-hero h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.10; letter-spacing: -.02em; } html.t .plt-stat-val { font-size: var(--fs-h2); font-weight: 700; line-height: 1.20; letter-spacing: -.01em; } html.t .plt-benefit-title, html.t .plt-feature-title, html.t .wim-guide-text h3, html.t .wim-honest-content h3, html.t .wim-product-title, html.t .wim-wp-text h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } html.t .plt-sec-title { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } html.t .plt-sec-sub, html.t .plt-hero-answer { font-size: var(--fs-lead); font-weight: 400; line-height: 1.70; letter-spacing: 0; } html.t .plt-feature-num { font-size: var(--fs-lead); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .plt-benefit-desc, html.t .plt-feature-desc, html.t .wim-guide-text p, html.t .wim-honest-content p, html.t .wim-product-desc, html.t .wim-wp-text p { font-size: var(--fs-body); font-weight: 400; line-height: 1.75; letter-spacing: 0; } html.t .wim-data-guarantee { font-size: var(--fs-body); font-weight: 700; line-height: 1.75; letter-spacing: 0; } html.t .plt-eyebrow, html.t .plt-stat-label, html.t .wim-guide-label, html.t .wim-honest-label, html.t .wim-wp-label { font-size: var(--fs-xs); font-weight: 800; line-height: 1.20; letter-spacing: .12em; } html.t .wim-product-num { font-size: var(--fs-xs); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .plt-engine-badge { font-size: var(--fs-sm); font-weight: 700; line-height: 1.30; letter-spacing: 0; } html.t .plt-hero-pill { font-size: var(--fs-sm); font-weight: 700; line-height: 1.20; letter-spacing: 0; } html.t .wim-product-tags span { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.20; letter-spacing: .06em; } html.t .plt-feature-icon, html.t .wim-guide-icon, html.t .wim-wp-icon { font-size: var(--icon-lg); line-height: 1; } html.t .wim-honest-icon, html.t .wim-product-icon { font-size: var(--icon-md); line-height: 1; } html.t .plt-benefit-icon, html.t .plt-hero-pill i, html.t .wim-data-guarantee i { font-size: var(--icon-sm); line-height: 1; } /* ── The emphasized twins ── Apple's Headline is literally Body at semibold: same size, same leading, more weight. Without them, "make this bit stand out" turns into a new size, and a new size turns into a new role nobody named. */ .t-body-strong { font-size: var(--fs-body); font-weight: 700; line-height: 1.75; letter-spacing: 0; } .t-lead-strong { font-size: var(--fs-lead); font-weight: 600; line-height: 1.70; letter-spacing: 0; } .t-body-sm-strong { font-size: var(--fs-sm); font-weight: 700; line-height: 1.65; letter-spacing: .005em; } /* ── Arabic ── Uppercase does not exist in Arabic. text-transform is a no-op on the letters, but a label authored as uppercase-plus-tracking still carries the tracking, and tracking is what breaks the cursive join. Both are cancelled here. Leading is raised through --lh-k, which every role above multiplies by. */ :lang(ar) .t-label, :lang(ar) .t-badge, :lang(ar) .t-th, html.t:lang(ar) [class*="eyebrow"], html.t:lang(ar) [class*="-lbl"] { text-transform: none; letter-spacing: 0; } :lang(ar) .t-lead, :lang(ar) .t-body, :lang(ar) .t-body-sm { line-height: 1.9; } /* Arabic default heading scale, moved here from mani-globals-rtl.css. It keys off :lang(ar) and not [dir="rtl"] for the reason this file keeps repeating: dir is layout, lang is script, and a SIZE is a script decision. :where() is load-bearing. It drops each of these to (0,1,0), which is what lets ANY class-scoped size win over them; without it [dir="rtl"] h2 at (0,1,1) beat every .class rule and forced ~57 Arabic section titles to 35px while their English mirrors stayed 18-24px. So do NOT prefix them with html.t - that would lift them to (0,2,1) and put the defaults back on top of every role in this file. They are the floor, not a rule. */ :lang(ar) :where(h1) { font-size: var(--fs-h1); font-weight: 800; } :lang(ar) :where(h2) { font-size: var(--fs-h2); font-weight: 700; } /* The two sizes that genuinely differ by script. Both sit later in this file than their base role AND outrank it - html.t:lang(ar) .mnx-bc-sep is (0,3,1) against html.t .mnx-bc-sep at (0,2,1) - so the !important the separator carried in mani-shell-rtl.css is not needed and has been dropped. */ html.t:lang(ar) .mnx-bc-sep { font-size: var(--fs-micro); } /* 20px in a 120px dashed box: the words broke through their own border. It is a note beside a switch, and Arabic already has a 13px floor under it. */ /* ── the shared CTA band ────────────────────────────────────── Its layout and colour live in mani-colors-ltr.css because it is a component, not a page. Its SIZES live here, like everything else. The tokens are the ones it already shipped with - this moved the declarations, not the design. */ html.t .mcta-box h2 { font-size: var(--fs-h2); } html.t .mcta-box .mcta-p { font-size: var(--fs-lead); } html.t .mcta-social a { font-size: var(--fs-body); } /* ═══════════════════════════════════════════════════════════════ BREAKPOINTS | the mobile half of the same decision WHY THESE LIVE HERE AND NOT IN THE PAGE FILES A page used to shrink its own heading with @media (max-width: 900px) { .cp-sh { font-size: var(--fs-h3); } } That rule is (0,1,0). The role that sizes the same element above is `html.t .cp-sh` at (0,2,0). Specificity is compared before the media condition is ever consulted - a media query narrows WHEN a rule applies, it adds nothing to HOW STRONGLY it applies. So the desktop role kept winning inside the phone media query and the heading never stepped down. Twenty selectors were frozen at desktop size on a phone exactly that way. Raising the page rules would only move the fight one notch up. Sizes belong to one file, so the breakpoint belongs to that file too. Every rule below is `html.t X` - the same selector as its base rule, written later in the same stylesheet. It wins on order, not on weight, and no page can take a size back. ONLY font-size IS DECLARED HERE Weight, leading and tracking do not change at a breakpoint; the base rule above already set them. Repeating them here is precisely how two copies of one decision drift apart. A NEW TYPE BREAKPOINT GOES HERE OR NOWHERE If you are about to write font-size inside a max-width media query in a page stylesheet, that is the bug this section exists to end. Add it below instead. Largest max-width first, which is the order the cascade reads them in: 600 must be able to override the same selector at 900, and 480 to override 600. Two of the values did not arrive on the scale and were mapped to the nearest step on it rather than copied across: one was a raw .9rem, and one asked for a TEXT token on an icon. Both are marked at the rule below. Eleven page breakpoints are absent because they were no-ops - they asked for the size the element already had at that width, usually because the promoted role had landed on the same token - and one more repeated the token its own 900 rule already set. Those twelve were deleted, not moved. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* compare-erp */ html.t .cp-hero h1 { font-size: var(--fs-h2); } html.t .cp-sh { font-size: var(--fs-h3); } html.t .cp-sp { font-size: var(--fs-body); } /* globals - the shared .appx-* app-page system */ html.t .appx-h1 { font-size: var(--fs-h2); } html.t .appx-h2 { font-size: var(--fs-h3); } /* home */ html.t .hm-mod-item h3 { font-size: var(--fs-lead); } html.t .hm-bstat .bs-num { font-size: var(--fs-h4); } /* implementation - the comparison table tightens one step */ html.t .impl-compare-cell { font-size: var(--fs-sm); } html.t .impl-compare-row--head .impl-compare-cell { font-size: var(--fs-2xs); } /* learn */ html.t .frag-learn .vd-hero-h1 { font-size: var(--fs-h3); } /* pricing */ html.t .frag-pricing .pr-sec-h2 { font-size: var(--fs-h2); } /* recharge */ html.t .rch-info h1 { font-size: var(--fs-h3); } /* seo-landing - .sl-cmp-table was .9rem, an off-scale 14.4px; --fs-sm is the step it was reaching for. */ html.t .frag-seo-landing .sl-hero-h1 { font-size: var(--fs-h2); } html.t .frag-seo-landing .sl-sec-h2 { font-size: var(--fs-h3); } html.t .frag-seo-landing .sl-proof-item { font-size: var(--fs-sm); } html.t .frag-seo-landing .sl-cmp-table { font-size: var(--fs-sm); } /* use-cases */ html.t .uc-card-sector { font-size: var(--fs-2xs); } } @media (max-width: 600px) { /* affiliates */ html.t .aff-comm-pct { font-size: var(--fs-hero); } /* blog */ html.t .blg-index-h1 { font-size: var(--fs-h3); } html.t .blg-h1 { font-size: var(--fs-h3); } html.t pre.blg-code code { font-size: var(--fs-xs); } /* the shared CTA band, whose styles live in mani-colors-ltr.css */ html.t .mcta-box h2 { font-size: var(--fs-h4); } /* erpnext */ html.t .erp-hero-h2 { font-size: var(--fs-h2); } html.t .erp-title { font-size: var(--fs-h3); } /* globals - the payments band */ html.t .pay-h2 { font-size: var(--fs-h4); } html.t .pay-local-h2 { font-size: var(--fs-h3); } html.t .pay-local-sub { font-size: var(--fs-body); } /* home - .hm-flow-ico is an ICON: the page asked for --fs-lead, which is a text role. It steps down on the icon scale instead, to --icon-md. */ html.t .hm-impl-title { font-size: var(--fs-lead); } html.t .hm-flow-ico { font-size: var(--icon-md); } /* how */ html.t .hom-hero h1 { font-size: var(--fs-h2); } html.t .hom-title { font-size: var(--fs-h3); } /* implementation */ html.t .impl-hero h1 { font-size: var(--fs-h3); } html.t .impl-hero-stat .hs-num { font-size: var(--fs-h3); } /* integrations */ html.t .in-hero h1 { font-size: var(--fs-h1); } html.t .in-sh { font-size: var(--fs-h3); } /* learn */ html.t .frag-learn .vd-current-cat { font-size: var(--fs-lead); } /* pricing */ html.t .frag-pricing .pr-price { font-size: var(--fs-hero); } } @media (max-width: 480px) { /* compare-erp */ html.t .cp-hero h1 { font-size: var(--fs-h3); } html.t .cp-sh { font-size: var(--fs-h4); } html.t .cp-pillar-num { font-size: var(--fs-h1); } /* how */ html.t .hom-hero h1 { font-size: var(--fs-h3); } } /* ── Mockups keep their own scale ── .hv2 (the home hero diagram) and the chat/inbox mockups are illustrations with hand-tuned geometry: a card 252px wide, a caption at a measured offset, wires drawn to fixed coordinates. When the site scale grew, their inner text grew with it, the rows wrapped, the card got taller and swallowed the caption underneath it. Re-declaring the tokens INSIDE the drawing gives it a private scale - the picture stops moving when the reading scale changes, which is the correct relationship between the two. */ .hv2, /* home hero diagram */ .pgc-stage, /* chat page: ERP window + panel */ .au-chat, /* whatsapp page: conversations */ .au-sim3, .wg__erp, /* the record card in the inbox graphic */ .cv__rec { /* the record card in the two-viewer graphic */ --fs-lead: 14px; --fs-body: 13px; --fs-sm: 12px; --fs-xs: 11px; --fs-2xs: 10px; --fs-micro: 9px; } /* Arabic still needs its floor inside a drawing - the dot does not care that it is a mockup. One step up, no more, or the geometry breaks again. */ :lang(ar) .hv2, :lang(ar) .pgc-stage, :lang(ar) .au-chat, :lang(ar) .au-sim3, :lang(ar) .wg__erp, :lang(ar) .cv__rec { --fs-xs: 12px; --fs-2xs: 11px; --fs-micro: 10px; } /* ── Icon glyphs sit on a text baseline, not in the middle of their box ── place-items:center centres the LINE BOX, and a line box carries descender space the glyph does not use - so a Font Awesome mark inside a circle rides high by roughly half the descent. It looked fine only while the old size happened to cancel it out. line-height:1 + display:block removes the extra box so the glyph itself is what gets centred. */ html.t :where(.pgc-ring, .pgc-hi, .hm-app-ico, .hm-flow-ico, .pr-inc-ico, .pr-svc-ic, .appx-card i, .wv__i, .ifg-card i) i, html.t :where(.pgc-ring, .pgc-hi, .wv__i) svg { line-height: 1; display: block; } html.t .pgc-ring { font-size: var(--icon-md); } /* Tracking on an icon font shifts the glyph off its box; it never helps. */ html.t :where(.fas,.far,.fab,.fal,.fa,[class*=" fa-"],[class^="fa-"]) { letter-spacing: 0; } /* ── Font Awesome picks its FACE by weight, not its style ── fas/fa-solid is weight 900, far/fab is 400. They are not "bold" and "normal" - they are different faces of the same family, selected through font-weight. So any role that sets a weight and happens to land on an icon silently asks for a face that is not loaded, and the browser draws tofu. That is what turned the currency chevron into a box. These four lines put the weight back after every role. They are the last four rules in this file and must stay that way - nothing may be appended below them, because any rule that sets a font-weight after them takes the face away again. */ html.t .fas, html.t .fa-solid { font-weight: 900; } html.t .far, html.t .fa-regular { font-weight: 400; } html.t .fab, html.t .fa-brands { font-weight: 400; } html.t .fal, html.t .fa-light { font-weight: 300; }