/* About and Contact share the i2PDF structure and brand tokens. Native SVG art; no extra JS. */
.company-shell { --art-line: color-mix(in srgb, var(--accent) 25%, var(--line)); padding-block: 44px 76px; }
.company-eyebrow { display: block; color: var(--accent-hover); font-size: 12px; font-weight: 650; letter-spacing: .035em; }
.company-shell h1 { font-size: calc((clamp(38px, 4.25vw, 56px)) * var(--site-heading-scale)); line-height: 1.17; font-weight: 750; letter-spacing: -2px; margin: 18px 0 22px; }
.company-shell h1 > span { display: block; color: var(--accent); }
.company-shell h2 { font-size: calc((clamp(25px, 2.7vw, 34px)) * var(--site-heading-scale)); line-height: 1.3; letter-spacing: -.9px; font-weight: 700; margin: 12px 0 20px; }
.company-shell p { color: var(--muted); line-height: 1.85; }
.company-shell .company-lead { font-size: 16px; max-width: 530px; margin: 0; text-wrap: pretty; }
.company-shell a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 5px; }
.about-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 30px; padding-block: 18px 40px; }
.company-hero-copy { min-width: 0; }
.company-art { aspect-ratio: 1; }
.company-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.about-art { width: 100%; max-width: 480px; aspect-ratio: 500 / 440; justify-self: end; }
.company-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 29px; }
.company-actions .button { padding: 14px 23px; min-height: 49px; font-size: 14px; }
.company-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 550; text-underline-offset: 4px; }
.company-text-link:hover { text-decoration: underline; color: var(--accent-hover); }
.company-text-link .icon { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.about-facts { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 13px 20px; padding: 0; margin: 34px 0 0; color: var(--muted); }
.about-facts li { display: flex; gap: 6px; align-items: baseline; font-size: 11px; }
.about-facts strong { font-size: 20px; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.about-facts .icon { width: 16px; height: 16px; color: var(--accent); align-self: center; }
.about-story { display: grid; grid-template-columns: .92fr 1.2fr; gap: 64px; border-top: 1px solid var(--line); padding-top: 48px; margin-top: 15px; }
.about-story h2 { max-width: 380px; }
.about-story-copy p { font-size: 14px; margin: 0 0 17px; }
.about-story + .about-owner { margin-top: 28px; }
.about-values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-block: 28px 46px; }
.about-value { padding: 25px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.company-icon { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.company-icon .icon { width: 23px; height: 23px; }
.about-value h3 { font-size: 17px; letter-spacing: -.25px; font-weight: 650; margin: 18px 0 8px; }
.about-value p { font-size: 13px; margin: 0; }
.about-owner { display: grid; grid-template-columns: 240px minmax(0,1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--art-line); border-radius: 24px; box-shadow: 0 8px 32px -24px color-mix(in srgb,var(--accent) 35%,transparent); }
.owner-identity { display: flex; align-items: center; justify-content: center; padding: 32px; background: color-mix(in srgb,var(--accent) 5%,var(--surface)); border-inline-end: 1px solid var(--art-line); }
.owner-identity .brand-logo { width: 100%; max-width: 190px; height: auto; }
.owner-copy { padding: 32px 36px; }
.about-owner h2 { font-size: 24px; margin: 0 0 13px; letter-spacing: -.4px; }
.about-owner p { font-size: 14px; max-width: 660px; margin: 0; text-wrap: pretty; }
.about-owner p + p { margin-top: 14px; }
.about-owner p a { text-decoration: underline; text-underline-offset: 3px; }
.about-owner .owner-processing { padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.owner-processing a { color: var(--accent-readable, var(--accent-hover)); }
.about-owner .company-actions { margin-top: 22px; }
.about-family { margin-top: 68px; scroll-margin-top: 30px; }
.about-family > header { text-align: center; max-width: 650px; margin: 0 auto 30px; }
.about-family h2 { margin-bottom: 12px; }
.about-family > header p { margin: 0; font-size: 15px; }
.family-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; }
.family-card[hidden], .family-toggle[hidden] { display: none; }
.family-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 18px auto 0; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent-readable, var(--accent-hover)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.family-toggle:hover { background: color-mix(in srgb,var(--accent) 14%,var(--surface)); }
.family-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.family-toggle .icon { width: 17px; height: 17px; }
.family-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.family-card { --family-color: var(--accent); --family-readable: color-mix(in srgb,var(--family-color) 78%,var(--ink)); --family-soft: color-mix(in srgb,var(--family-color) 24%,var(--surface)); position: relative; display: flex; flex-direction: column; align-items: start; min-width: 0; padding: 20px 23px 17px; border: 1px solid color-mix(in srgb, var(--family-color) 16%, var(--line)); border-radius: 22px; background: var(--surface); transition: transform .18s ease, border-color .18s ease; }
.family-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--family-color) 55%,var(--line)); }
.family-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 94px; margin-bottom: 9px; }
.family-art { display: block; width: 110px; flex: 0 0 110px; color: var(--family-color); }
.family-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.family-art text { font-family: var(--font-body, system-ui), sans-serif; direction: ltr; }
.family-art-halo { fill: var(--family-color); opacity: .06; }
.family-art-paper { fill: var(--surface); stroke: color-mix(in srgb,var(--family-color) 40%,var(--line)); stroke-width: 1.6; stroke-linejoin: round; }
.family-art-soft { fill: var(--family-soft); }
.family-art-stroke { stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.family-art-muted { stroke: var(--family-color); opacity: .3; stroke-width: 3; stroke-linecap: round; }
.family-card-arrow { width: 29px; height: 29px; display: grid; place-items: center; color: var(--family-readable); background: color-mix(in srgb,var(--family-color) 8%,var(--surface)); border-radius: 50%; transition: background .18s ease; }
.family-card-arrow .icon { width: 15px; height: 15px; transform: rotate(-40deg); }
.family-card:hover .family-card-arrow { background: color-mix(in srgb,var(--family-color) 19%,var(--surface)); }
.family-card h3 { min-width: 0; font-size: clamp(19px,1.7vw,23px); line-height: 1.4; font-weight: 720; letter-spacing: -.65px; margin: 0; overflow-wrap: anywhere; }
.family-card p { font-size: 13px; margin: 0 0 19px; min-height: 3.7em; }
.family-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding-top: 12px; margin-top: auto; border-top: 1px solid color-mix(in srgb,var(--family-color) 12%,var(--line)); }
.family-domain { color: var(--family-readable); font-size: 12px; font-weight: 550; letter-spacing: .01em; overflow-wrap: anywhere; }
.family-card:last-child:nth-child(3n+2) { grid-column: span 2; }
.family-card-main { display: flex; flex-direction: column; align-items: start; width: 100%; }
.family-apps { --family-menu-width: 320px; position: relative; display: block; }
/* A 45px touch target occupies the same 29px visible row as the other footers. */
.family-apps > summary { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 45px; padding: 8px 0; margin-block: -8px; border-radius: 6px; color: var(--family-readable); font-size: 12px; font-weight: 550; list-style: none; cursor: pointer; }
.family-apps > summary::-webkit-details-marker { display: none; }
.family-apps > summary::marker { content: ''; }
.family-apps > summary:hover { color: var(--accent); }
.family-apps > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.family-apps > summary > .family-card-arrow { margin-inline-start: auto; }
.company-shell .family-apps > summary .icon { transform: none; }
.company-shell .family-apps[open] > summary .icon { transform: rotate(180deg); }
.family-apps-count { display: grid; place-items: center; min-width: 23px; height: 23px; padding-inline: 5px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 11px; }
.family-apps ul { position: absolute; inset-inline-end: 0; top: calc(100% + 12px); width: min(100%, var(--family-menu-width)); z-index: 1; list-style: none; margin: 0; padding: 5px; border: 1px solid var(--art-line); border-radius: 13px; background: var(--surface); box-shadow: 0 10px 25px -12px rgb(20 35 65 / .25); }
.family-apps li + li { border-top: 1px solid var(--line); }
.family-apps li a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px; border-radius: 8px; font-size: 14px; }
.family-apps li a:hover { background: var(--accent-soft); }
.family-apps li a > .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); transform: rotate(-40deg); }
.family-app-platform { margin-inline-start: auto; padding: 3px 8px; background: var(--canvas); border-radius: 6px; font-size: 10px; color: var(--muted); }
.family-card-with-menu:has(.family-apps[open]) { transform: none; z-index: 2; }
.company-shell[dir="rtl"] .family-apps li a > .icon { transform: rotate(-140deg); }
.contact-panel { max-width: 780px; margin: 0 auto; padding-top: 10px; text-align: center; }
.contact-panel .company-lead { max-width: 520px; margin-inline: auto; }
.contact-art { width: 320px; max-width: 75%; margin: 18px auto 14px; }
.contact-email { display: grid; grid-template-columns: 48px minmax(0,1fr) 24px; text-align: start; gap: 20px; align-items: center; max-width: 590px; padding: 23px 26px; margin: 0 auto; border: 1px solid var(--art-line); border-radius: 21px; background: var(--surface); box-shadow: 0 8px 24px -16px color-mix(in srgb,var(--accent) 30%,transparent); transition: border-color .18s ease, transform .18s ease; }
.contact-email:hover { border-color: var(--accent); transform: translateY(-2px); }
.contact-email-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.contact-email-icon .icon { width: 25px; height: 25px; }
.contact-email-label { display: block; font-size: 11px; color: var(--muted); }
.contact-email strong { display: block; font-size: clamp(17px,2.3vw,25px); font-weight: 600; letter-spacing: -.4px; color: var(--ink); margin: 4px 0; overflow-wrap: anywhere; }
.contact-email strong bdi { font-family: var(--font-body); }
.contact-email-hint { display: block; font-size: 10px; color: var(--muted); }
.contact-email-arrow { color: var(--accent); }
.contact-panel .contact-hint { max-width: 500px; margin: 21px auto 35px; font-size: 12px; }
.contact-followup { display: flex; justify-content: center; }
.contact-followup .company-text-link { min-height: 44px; }
.company-shell[dir="rtl"] :is(h1,h2,h3) { letter-spacing: 0; }
.company-shell[dir="rtl"] h1 { font-size: calc((clamp(28px,3.3vw,43px)) * var(--site-heading-scale)); line-height: 1.8; }
.company-shell[dir="rtl"] h2 { font-size: calc((clamp(22px,2.4vw,28px)) * var(--site-heading-scale)); }
.company-shell[dir="rtl"] .about-value h3 { font-size: 16px; }
.company-shell[dir="rtl"] .family-card h3 { font-size: 21px; }
.company-shell[dir="rtl"] .family-card p { min-height: 4.4em; }
.company-shell[dir="rtl"] .about-owner h2 { font-size: 21px; }
.company-shell[dir="rtl"] .company-eyebrow { letter-spacing: 0; }
.company-shell[dir="rtl"] .company-actions .button > .icon, .company-shell[dir="rtl"] .company-text-link > .icon:not(.down), .company-shell[dir="rtl"] .contact-email-arrow .icon { transform: rotate(180deg); }
.company-shell[dir="rtl"] .family-card-arrow .icon { transform: rotate(-140deg); }
:root[data-appearance="dark"] .company-shell p { color: var(--muted); }
:root[data-appearance="dark"] .company-eyebrow { color: var(--accent-readable); }
:root[data-appearance="dark"] .family-card { --family-readable: color-mix(in srgb,var(--family-color) 50%,var(--ink)); }
:root[data-appearance="dark"] .family-art { color: color-mix(in srgb,var(--family-color) 70%,var(--ink)); }
@media (max-width:1100px) {
    .family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.family-card:last-child { grid-column: auto; }.family-card:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width:900px) {
    .about-hero { gap: 12px; }.company-shell h1 { font-size: calc((40px) * var(--site-heading-scale)); }.about-facts { gap: 10px 15px; }
    .about-story { gap: 30px; }.about-values { gap: 14px; }.about-value { padding: 20px; }
    .about-owner { grid-template-columns: 210px minmax(0,1fr); }.owner-identity { padding: 26px; }.owner-copy { padding: 28px; }
}
@media (max-width:680px) {
    .company-shell { padding-block: 27px 45px; }.about-hero { grid-template-columns: 1fr; padding-block: 6px 24px; text-align: center; gap: 10px; }
    .company-shell h1 { font-size: calc((clamp(32px,8.8vw,42px)) * var(--site-heading-scale)); letter-spacing: -1.4px; }.company-shell .company-lead { font-size: 15px; }
    .company-actions,.about-facts { justify-content: center; }.company-actions { gap: 17px; }.about-facts { margin-top: 23px; }
    .about-art { max-width: 330px; justify-self: center; }.about-story { grid-template-columns: 1fr; padding-top: 29px; gap: 6px; }
    .about-story h2 { max-width: none; margin-bottom: 16px; }.about-values { grid-template-columns: 1fr; margin-block: 12px 30px; }
    .about-value { padding: 21px; }.about-value h3 { margin-top: 12px; }.about-owner { grid-template-columns: 1fr; }
    .owner-identity { padding: 24px 22px; border-inline-end: 0; border-bottom: 1px solid var(--art-line); }
    .owner-identity .brand-logo { max-width: 165px; }.owner-copy { padding: 24px 22px; }
    .about-owner h2 { font-size: 22px; }.about-owner .company-actions { justify-content: flex-start; margin-top: 20px; }
    .about-family { margin-top: 44px; }.family-grid { grid-template-columns: 1fr; gap: 13px; }.family-card:last-child:nth-child(odd) { grid-column: auto; }
    .family-card { padding: 16px 21px; }.family-card h3 { font-size: 22px; }.family-card-heading { min-height: 90px; margin-bottom: 5px; }
    .family-card p, .company-shell[dir="rtl"] .family-card p { min-height: 0; }
    .contact-panel { padding-top: 7px; }.contact-art { width: 250px; margin-block: 15px; }
    .contact-email { padding: 19px 16px; grid-template-columns: 37px minmax(0,1fr); gap: 12px; }
    .contact-email-icon { width: 37px; height: 42px; }.contact-email strong { font-size: 18px; letter-spacing: -.35px; }.contact-email-arrow { display: none; }
    .contact-panel .contact-hint { margin-bottom: 27px; }
}
@media (max-width:380px) {
    .family-art { width: 80px; flex-basis: 80px; }
    .family-card h3, .company-shell[dir="rtl"] .family-card h3 { font-size: 20px; }
}
@media (prefers-reduced-motion:reduce) { .family-card,.family-card-arrow,.contact-email { transition: none; }.family-card:hover,.contact-email:hover { transform: none; } }

/* Site-specific artwork and support guidance use the same suite components. */
.company-shell[lang="en"] { --font-body: "Google Sans Flex", sans-serif; font-family: var(--font-body); line-height: 1.55; }
.company-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.company-art text { font-family: "Google Sans Flex", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.company-art-halo { fill: var(--accent); opacity: .055; }
.company-art-soft { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.company-art-paper { fill: var(--surface); stroke: var(--art-line); stroke-width: 1.8; stroke-linejoin: round; }
.company-art-key { fill: var(--surface); stroke: var(--art-line); stroke-width: 1; }
.company-art-rule { stroke: var(--art-line); stroke-width: 1.5; }
.company-art-stroke { stroke: var(--accent-readable, var(--accent)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.company-art-muted { stroke: var(--accent); opacity: .27; stroke-width: 4; stroke-linecap: round; }
.company-art-dot { fill: var(--accent); opacity: .35; }
.company-art-accent { fill: var(--accent-readable, var(--accent)); }
.company-art-ink { fill: var(--ink); }
.contact-art { aspect-ratio: 320 / 270; }
.contact-guidance { text-align: start; margin: 34px auto; max-width: 720px; }
.contact-guidance > h2 { font-size: 22px; letter-spacing: -.4px; text-align: center; margin-bottom: 21px; }
.contact-topics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.contact-topic { padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.contact-topic h3 { font-size: 16px; font-weight: 650; line-height: 1.5; margin: 16px 0 8px; }
.contact-topic p { font-size: 13px; margin: 0; }
.contact-guidance .contact-privacy { margin: 20px 3px 0; font-size: 12px; text-align: center; }
.contact-privacy a { color: var(--accent-readable, var(--accent-hover)); text-decoration: underline; text-underline-offset: 3px; }
/* English page content retains its typography inside an Arabic UI shell. */
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] :is(li, summary, .button) { line-height: 1.55; }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] h1 { line-height: 1.17; }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] h2 { line-height: 1.3; }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] h3 { line-height: 1.5; font-size: 17px; }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] p { line-height: 1.85; color: var(--muted); }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] .company-lead { font-size: 16px; }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] :is(.about-value, .family-card, .contact-topic) p { font-size: 13px; }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] .family-card h3 { font-size: clamp(19px,1.7vw,23px); }
:root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] :is(.contact-hint, .contact-privacy) { font-size: 12px; }
@media (max-width:680px) {
    .contact-topics { grid-template-columns: 1fr; gap: 13px; }
    .contact-topic { padding: 21px; }
    .contact-guidance > h2 { font-size: 21px; }
    :root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] .company-lead { font-size: 15px; }
    :root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] .family-card h3 { font-size: 22px; }
}
@media (max-width:380px) {
    :root[data-font="noto-kufi-arabic"] .company-shell[lang="en"] .family-card h3 { font-size: 20px; }
}