/* generated from expressive.css by web/tool/site_l10n.mjs: do not edit */
/* Shared expressive language: violet actions, lime emphasis, readable content. */
/* Shared layout rhythm: content determines height; spacing scales between
   compact phones and wide screens rather than reserving empty full screens. */
:root { --site-content-width:1392px; --site-gutter:clamp(20px,4vw,56px); --site-section-space:clamp(40px,5vw,72px); --site-section-gap:clamp(24px,4vw,56px); --site-heading-size:clamp(36px,4.6vw,64px); --site-hero-min:clamp(560px,78svh,760px); }
:root .expressive :is(.product-paths,.discover,.connection-section,.business-inner,.vault-feature,.download-section,.faq-section) { padding-block:var(--site-section-space); }
:root .expressive :is(.product-paths,.business-inner,.vault-feature,.download-section,.faq-section) { width:100%; max-width:var(--site-content-width); margin-inline:auto; padding-inline:var(--site-gutter); }
:root .expressive .connection-section { width:calc(100% - 2 * var(--site-gutter)); max-width:calc(var(--site-content-width) - 2 * var(--site-gutter)); margin:var(--site-section-space) auto; padding-inline:var(--site-gutter); }
:root .expressive :is(.connection-section,.vault-feature) { gap:var(--site-section-gap); }
:root .expressive .discover :is(.section-heading,.gallery-top,.gallery-foot) { max-width:var(--site-content-width); margin-inline:auto; padding-inline:var(--site-gutter); }
:root .expressive .discover .gallery-foot { width:100%; }
:root .expressive :is(.paths-heading h2,.discover .section-heading h2,.download-heading h2,.business-heading h2,.connection-copy h2,.vault-copy h2,.faq-section h2) { font-size:var(--site-heading-size); line-height:1.12; }
:root .expressive :is(.connection-copy,.vault-copy,.audience-copy)>p { max-width:60ch; }
:root .expressive .download-panel { padding-block:clamp(32px,4.5vw,64px); gap:var(--site-section-gap); }
:root .expressive .scope-card { padding:clamp(24px,3vw,40px); }
:root .expressive .detail-dialog { max-height:calc(100svh - 32px); overflow-y:auto; overscroll-behavior:contain; }
:root:is(:lang(ar),:lang(fa)) .expressive :is(.paths-heading h2,.discover .section-heading h2,.download-heading h2,.business-heading h2,.connection-copy h2,.vault-copy h2,.faq-section h2) { line-height:1.4; }
@media(max-width:767px) {
 :root { --site-hero-min:clamp(520px,70svh,640px); }
 :root .expressive .business-heading h2 { max-width:18ch; margin-inline:auto; }
 :root .expressive .scope-grid { gap:16px; }
}
.expressive { --brand-violet:#5930f5; --brand-lime:#d0ff57; --brand-ink:#17131f; --brand-soft:#eee9ff; }
/* A compact opening leaves room to discover the next section. Content can
   still grow naturally for translated headlines and larger browser text. */
.expressive .hero-wrap .hero { height:auto; min-height:var(--site-hero-min); max-height:none; display:flex; align-items:center; padding:112px 0 88px; overflow:hidden; }
.expressive .hero-wrap .hero-copy { width:92%; max-width:1340px; padding:0 7%; transform:none!important; }
.expressive .hero-wrap .hero h1 { font-size:clamp(48px,5.2vw,80px); line-height:1; letter-spacing:-.04em; margin:20px 0; }
.expressive .hero-wrap .hero-description { font-size:18px; line-height:28px; max-width:592px; min-height:84px; color:#fff; }
.expressive .hero-wrap .hero-scenes { opacity:.72; }
.expressive .hero-wrap .hero-shade { background:linear-gradient(260deg,#200962dc 0%,#2e0c8f77 55%,#2b118b11); }
.expressive .hero-wrap .hero-actions { gap:16px 24px; margin-top:24px; }
.expressive .hero-wrap .hero-actions .button { min-height:56px; font-size:16px; padding:16px 24px; background:var(--brand-lime); color:var(--brand-ink); }
.expressive .hero-wrap .hero-actions .ios-note { font-size:12px; color:#f1eaff; }
.expressive .hero-wrap .hero-explore { font-size:15px; min-height:48px; margin-top:16px; }
.expressive .hero-wrap .hero-bottom { bottom:24px; }
.expressive .hero-wrap .hero-caption { font-size:12px; }
.expressive .hero-wrap .hero-controls .icon-button { width:44px; height:44px; }
.expressive .hero-wrap .slide-dot { min-width:44px; min-height:44px; }
.expressive .marquee-band { height:50px; }
.expressive .marquee-track { animation:none; }
.expressive .marquee-track>span { font-size:12px; }
.product-paths { max-width:1240px; margin:0 auto; padding:64px 36px 20px; }
.paths-heading { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:24px; }
.paths-heading h2 { font-size:clamp(27px,3vw,42px); letter-spacing:-.035em; line-height:1.12; font-weight:500; margin:0; }
.paths-heading p { font-size:15px; color:#595162; line-height:1.5; }
.scope-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.scope-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:34px; border-radius:30px; color:var(--brand-ink); }
.scope-shared { background:var(--brand-soft); }
.scope-specialist { background:#f0f5e4; }
.scope-label { font-size:11px; font-weight:600; letter-spacing:.06em; line-height:1.6; }
.scope-icon { display:grid; place-items:center; width:46px; height:46px; margin-top:26px; background:var(--brand-violet); color:#fff; border-radius:16px; }
.scope-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; }
.scope-status { display:inline-block; margin-top:26px; padding:12px 14px; background:#d8ebb6; border-radius:18px; font-size:12px; line-height:1.6; font-weight:600; }
.scope-card h3 { font-size:clamp(30px,3.1vw,43px); letter-spacing:-.035em; line-height:1.1; font-weight:500; margin:24px 0 16px; }
.scope-card p,.scope-card li { font-size:15px; line-height:1.65; color:#51465e; }
.scope-card p { max-width:460px; margin:0; }
.scope-card ul { padding-right:19px; margin:20px 0 24px; }
.scope-card li+li { margin-top:9px; }
.scope-card .text-link { margin-top:auto; min-height:48px; font-size:14px; color:#4520cc; }
.scope-note { max-width:900px; font-size:13px; line-height:1.7; color:#62596c; margin:20px 0 0; }
.path-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.path-card { appearance:none; text-align:right; display:flex; flex-direction:column; align-items:flex-start; gap:12px; border:1px solid #e7e1f0; border-radius:28px; padding:26px; background:#faf9fd; color:var(--brand-ink); font:inherit; cursor:pointer; transition:background .18s,transform .18s; }
.path-card:hover { background:var(--brand-soft); transform:translateY(-3px); }
.path-card:first-child { background:var(--brand-soft); border-color:var(--brand-soft); }
.path-card:last-child { background:#f3f7e9; border-color:#e5ecd4; }
.path-card .path-icon { display:grid; place-items:center; height:48px; width:48px; border-radius:17px; background:var(--brand-violet); color:#fff; }
.path-card .path-icon svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; }
.path-card strong { font-size:23px; font-weight:600; letter-spacing:-.025em; line-height:1.15; }
.path-card>span:not(.path-icon) { font-size:15px; line-height:1.55; color:#51465e; }
.path-card .path-action { margin-top:auto; padding-top:12px; font-weight:600; color:#4520cc!important; }
.expressive .discover { padding-top:75px; }
.expressive .discover .section-heading { max-width:1000px; margin:0 auto; }
.expressive .discover .section-heading h2 { font-size:clamp(42px,6vw,76px); line-height:1.04; letter-spacing:-.045em; }
.expressive .discover .section-intro { font-size:16px; color:#5a5164; line-height:1.7; max-width:500px; }
.expressive .discover .discover-shape { opacity:.22; }
.expressive .discover .shape-lime { width:300px; height:300px; }
.expressive .discover .filter { min-height:48px; font-size:13px; padding:10px 17px; }
.expressive .discover .gallery-top { margin-top:36px; }
.expressive .discover .feature-rail { padding-top:28px; padding-bottom:48px; }
.expressive .discover .feature-copy h3 { font-size:30px; line-height:1.12; }
.expressive .discover .feature-copy>p:not(.feature-kicker) { font-size:15px; line-height:1.65; min-height:8.2em; color:#5a5164; }
.expressive .discover .feature-copy>.text-link { min-height:48px; font-size:14px; }
.expressive .discover .feature-kicker { font-size:11px; letter-spacing:.06em; }
.expressive .connection-copy>p,.expressive .vault-copy>p,.expressive .audience-copy>p { font-size:16px; line-height:1.7; }
.expressive .faq-list summary { min-height:56px; font-size:16px; }
.expressive .faq-list details>p { font-size:15px; line-height:1.7; }
.expressive .hero-explore:focus-visible,.expressive button:focus-visible,.expressive a:focus-visible { outline:3px solid var(--brand-violet); outline-offset:5px; }
.expressive .hero button:focus-visible,.expressive .hero a:focus-visible { outline-color:var(--brand-lime); }
.expressive .header .menu-toggle { min-width:44px; min-height:44px; }
.expressive .header .button.small { min-height:44px; font-size:12px; }
.expressive .header .desktop-nav a { display:inline-flex; align-items:center; min-height:44px; }
.expressive .discover .rail-controls .icon-button { width:48px; height:48px; }
.expressive .audience-switch button { min-height:48px; font-size:14px; }
.expressive .dialog-close { width:48px; height:48px; top:12px; left:12px; }
.expressive .detail-dialog .eyebrow { font-size:11px; color:#62516f; }
.expressive .detail-dialog>p:not(.eyebrow):not(.dialog-footnote),.expressive .qr-dialog>p:not(.eyebrow) { font-size:16px; line-height:1.7; color:#5a5164; }
.expressive .detail-dialog li { font-size:15px; color:#51465e; }
.expressive .detail-dialog .button { min-height:52px; font-size:15px; }
.expressive .dialog-footnote { font-size:12px; color:#625b6b; }
.expressive .biz-steps p { font-size:15px; }
@media(min-width:1600px) { .expressive .hero-wrap .hero-copy { padding-right:7%; max-width:1500px; } }
@media(max-width:1100px) { .expressive .hero-wrap .hero-copy { width:100%; padding-right:6%; padding-left:6%; } }
@media(max-width:767px) {
 .expressive .hero-wrap .hero { display:flex; flex-direction:column; min-height:var(--site-hero-min); padding:100px 24px 80px; }
 .expressive .hero-wrap .hero-copy { width:100%; height:auto; padding:0; max-width:520px; align-items:flex-start; text-align:right; }
 .expressive .hero-wrap .hero h1 { font-size:clamp(38px,9.5vw,56px); margin:16px 0; line-height:1.04; }
 .expressive .hero-wrap .hero-description { font-size:16px; min-height:0; max-width:100%; line-height:24px; }
 .expressive .hero-wrap .hero-actions { align-items:flex-start; flex-direction:column; gap:16px; margin-top:24px; }
 .expressive .hero-wrap .hero-actions .button { font-size:15px; min-height:56px; }
 .expressive .hero-wrap .hero-explore { display:inline-flex; margin-top:8px; }
 .expressive .hero-wrap .hero-caption { display:none; }
 .expressive .hero-wrap .hero-bottom { right:24px; left:24px; bottom:24px; justify-content:center; }
 .expressive .hero-wrap .hero-controls .icon-button { min-width:44px; min-height:44px; }
 .expressive .hero-wrap .hero-controls { gap:1px; }
 .expressive .hero-wrap .hero-controls .motion-toggle { margin-right:0; }
 .expressive .hero-wrap .slide-dot,.expressive .hero-wrap .slide-dot.active { width:44px; }
 .expressive .hero-wrap .slide-dot.active span { width:32px; }
 .product-paths { padding:40px 20px 12px; }
 .paths-heading { display:block; }
 .paths-heading p { margin-top:12px; }
 .path-grid { grid-template-columns:1fr; gap:12px; }
 .scope-grid { grid-template-columns:1fr; gap:16px; }
 .scope-card { padding:26px; border-radius:26px; }
 .scope-card h3 { font-size:34px; }
 .scope-label { font-size:10px; }
 .scope-card .text-link { font-size:13px; }
 .path-card { padding:22px; border-radius:24px; }
 .path-card strong { font-size:23px; }
 .expressive .discover { padding-top:58px; }
 .expressive .discover .section-heading h2 { font-size:clamp(38px,10vw,60px); }
 .expressive .discover .section-intro { font-size:15px; }
 .expressive .discover .filters { gap:8px; }
 .expressive.business-page .discover .filters { flex-wrap:wrap; }
 .expressive .discover .filter { flex:none; font-size:12px; }
 .expressive .discover .feature-rail { --card-width:min(84vw,370px); padding-top:24px; padding-bottom:40px; }
 .expressive .discover .feature-copy h3 { font-size:29px; min-height:0; }
 .expressive .discover .feature-copy>p:not(.feature-kicker) { font-size:15px; min-height:0; }
 .expressive .discover .feature-copy>.text-link { font-size:14px; }
 .expressive .discover .feature-art { height:240px; }
 .expressive .connection-copy>p,.expressive .vault-copy>p,.expressive .audience-copy>p { font-size:15px; }
 .expressive .header { gap:10px; padding-right:18px; padding-left:18px; }
 .expressive .header .brand-type-business { --brand-type-width:132px; }
 .expressive .header .nav-end { gap:5px; }
 .expressive .header .button.small { font-size:11px; padding:10px 12px; }
}
@media(max-width:359px) { .expressive .hero-wrap .hero { padding-right:20px; padding-left:20px; } .expressive .hero-wrap .hero h1 { font-size:38px; } .expressive.business-page .header .button.small { display:none; } .expressive .header .brand-type-business { --brand-type-width:145px; } }
@media(prefers-reduced-motion:reduce) { .path-card:hover { transform:none; } .path-card { transition:none; } }

/* Scrolled header: the frosted glass keeps its deep tint, so it never turns grey
   over light sections; colours behind it glow through richer, and Safari before
   version 18 gets the blur too. */
.expressive .header.is-scrolled { -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); }

/* Pressed controls change shape: a pill tightens towards a rounded square, a
   round button squares off, a card rounds out, and each springs back when let
   go. Pills keep a radius of half their height, so the change starts at once. */
:root { --press-spring:cubic-bezier(.34,1.56,.64,1); }
@supports (transition-timing-function:linear(0, 1)) {
  :root { --press-spring:linear(0, .091, .294, .527, .738, .901, 1.01, 1.071, 1.093, 1.091, 1.074, 1.052, 1.031, 1.014, 1.002, .995, .992, .991, .992, .994, .996, .998, .999, 1); }
}
.expressive .button { border-radius:28px; transition:transform .35s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s, border-radius .45s var(--press-spring), scale .45s var(--press-spring); }
.expressive .button.small { border-radius:22px; }
.expressive :is(.filter, .audience-switch button) { border-radius:24px; transition:background .2s, color .2s, border-radius .45s var(--press-spring), scale .45s var(--press-spring); }
.expressive .icon-button { transition:background .2s, transform .2s, border-radius .45s var(--press-spring), scale .45s var(--press-spring); }
.expressive .download-button { transition:transform .2s, background .2s, border-radius .45s var(--press-spring), scale .45s var(--press-spring); }
.expressive :is(.button, .filter, .audience-switch button):not([aria-disabled="true"], :disabled):active { border-radius:14px; scale:.97; }
.expressive .icon-button:not([aria-disabled="true"], :disabled):active { border-radius:14px; scale:.94; }
.expressive .download-button:not([aria-disabled="true"], :disabled):active { border-radius:26px; scale:.98; }
.expressive :is(.button, .icon-button, .filter, .audience-switch button, .download-button):not([aria-disabled="true"], :disabled):active { transition-duration:.12s; transition-timing-function:cubic-bezier(.2,0,0,1); }

/* Headlines keep their last word company: pretty wrapping where the browser has
   it, balanced lines where it does not. Short intros break into even lines. */
.expressive :is(h1, h2, h3) { text-wrap:balance; text-wrap:pretty; }
.expressive :is(.section-intro, .hero-description) { text-wrap:balance; }

@media(prefers-reduced-motion:reduce) { .expressive :is(.button, .icon-button, .filter, .audience-switch button, .download-button):active { scale:none; } }

/* Type scale. The small text took its sizes from many older rules, some as small
   as 7px. These four steps replace them on every width: labels in capitals at
   12px, captions and small print at 13px, controls at 14px and supporting copy
   at 15px, with line heights on the 4px grid. The :root prefix lets them win
   over the older rules; text inside the product illustrations keeps its scale. */
:root .expressive :is(.eyebrow, .panel-number, .scope-label),
:root .expressive .hero-copy .eyebrow,
:root .expressive .section-heading .eyebrow,
:root .expressive :is(.download-heading, .business-heading, .faq-section, .detail-dialog, .qr-dialog) .eyebrow,
:root .expressive .discover .feature-kicker { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.1em; }
:root .expressive :is(.hero-scroll, .soon-badge, .art-tag, .drag-hint, .filter span),
:root .expressive .download-button small { font-size:11px; line-height:16px; letter-spacing:.08em; }
:root .expressive :is(.art-example, .gallery-foot, .caption-number) { font-size:12px; line-height:16px; }
:root .expressive :is(.footer-bottom, .footer-legal, .release-test, .release-info, .download-bottom, .scope-status),
:root .expressive .download-bottom > span,
:root .expressive .hero-wrap :is(.hero-caption, .hero-actions .ios-note) { font-size:13px; line-height:20px; }
:root .expressive .footer-note { font-size:13px; line-height:20px; }
:root .expressive .footer-lang { font-size:13px; }
:root .expressive :is(.install-help, .vault-points span, .footer-contact address),
:root .expressive .audience-copy .button,
:root .expressive .discover .filter,
:root .expressive .biz-steps p { font-size:14px; line-height:20px; }
:root .expressive .biz-steps li > span { font-size:12px; line-height:16px; }
:root .expressive :is(.audience-copy ul, .footer-top > p, .footer-top > .text-link, .scope-note),
:root .expressive :is(.connection-copy, .vault-copy, .scope-card) .text-link,
:root .expressive :is(.business-heading, .download-heading) > p:last-child { font-size:15px; line-height:24px; }
@media(max-width:649px) { :root .expressive .discover .filter { font-size:13px; } }

/* The first choices and the last answers use the same responsive shapes as
   the primary controls, keeping the expressive language through the page. */
.expressive .path-card { transition:background .2s, transform .2s, border-radius .45s var(--press-spring), scale .45s var(--press-spring); }
.expressive .path-card:hover { border-radius:36px; }
.expressive .path-card:active { border-radius:20px; scale:.985; transition-duration:.12s; }
.expressive .faq-list summary > span { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand-violet); transition:transform .45s var(--press-spring), border-radius .45s var(--press-spring), background .2s; }
.expressive .faq-list details[open] summary > span { border-radius:10px; background:var(--brand-lime); color:var(--brand-ink); }
.expressive .faq-list summary:hover { color:var(--brand-violet); }
.expressive .faq-list summary:focus-visible { outline:3px solid var(--brand-violet); outline-offset:5px; border-radius:12px; }
@media(prefers-reduced-motion:reduce) {
 .expressive .path-card, .expressive .faq-list summary > span { transition:none; }
 .expressive .path-card:active { scale:none; }
}

/* Readable navigation moves into the menu before translated labels crowd
   the brand and actions. Touch targets remain at least 44px. */
:root .expressive .header :is(.desktop-nav a, .button.small, .lang-menu summary) { white-space:nowrap; }
:root .expressive .header .desktop-nav { font-size:16px; line-height:24px; gap:28px; }
:root .expressive .header .button.small { font-size:14px; line-height:20px; }
:root .expressive .header .lang-menu summary { font-size:14px; min-height:44px; }
@media(max-width:1199px) {
 :root .expressive .header .desktop-nav { font-size:16px; }
 :root .expressive .header .desktop-nav { gap:24px; }
}
@media(min-width:650px) and (max-width:1099px) {
 :root .expressive .header .desktop-nav { display:none; }
 :root .expressive .header .menu-toggle { display:flex; flex-direction:column; gap:5px; width:44px; height:44px; }
 :root .expressive .header .menu-toggle>span { width:13px; height:1px; transition:transform .2s; }
 :root .expressive .header .menu-toggle[aria-expanded="true"]>span:first-child { transform:translateY(3px) rotate(-45deg); }
 :root .expressive .header .menu-toggle[aria-expanded="true"]>span:last-child { transform:translateY(-3px) rotate(45deg); }
 :root .expressive .header .mobile-nav { right:auto; left:28px; width:340px; }
}
@media(max-width:649px) { :root .expressive .header .button.small { font-size:14px; } }
@media(max-width:429px) {
 :root .expressive.business-page .header .button.small { width:44px; min-width:0; padding:0; gap:0; justify-content:center; font-size:0; }
 :root .expressive.business-page .header .button.small svg { display:block; width:18px; height:18px; }
}


/* Content and interactive labels share a consistent readable scale. Artwork
   captions and legal fine print intentionally remain secondary. */
:root .expressive :is(.paths-heading p,.scope-card p,.scope-card li,.path-card>span:not(.path-icon),.feature-copy>p:not(.feature-kicker),.connection-copy>p,.vault-copy>p,.audience-copy>p,.audience-copy ul,.faq-list details>p,.biz-steps p,.detail-dialog li) { font-size:1rem; line-height:1.6; }
:root .expressive :is(.business-heading,.download-heading)>p:last-child { font-size:1rem; line-height:1.6; }
:root .expressive :is(.filter,.audience-switch button,.text-link,.install-help) { font-size:.9375rem; line-height:1.5; }
:root .expressive .header .mobile-nav { max-height:calc(100svh - 100px); overflow-y:auto; }
:root .expressive .header .mobile-nav>a { font-size:1rem; line-height:1.5; min-height:48px; }
@media(max-width:429px) {
 :root .expressive .header .button.small { width:44px; min-width:44px; padding:0; gap:0; justify-content:center; font-size:0; }
 :root .expressive .header .button.small svg { display:block; width:18px; height:18px; }
}

/* Hidden, inert slide copies share grid cells with the visible text. Intrinsic
   sizing reserves the tallest translation at any width without fixed heights. */
:root .expressive .hero-wrap .hero-copy { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"eyebrow" "title" "description" "actions" "explore"; align-content:center; justify-items:start; }
.expressive .hero-copy>.eyebrow { grid-area:eyebrow; }
.expressive .hero-copy>h1 { grid-area:title; }
.expressive .hero-copy>.hero-description { grid-area:description; min-height:0; }
.expressive .hero-copy>.hero-actions { grid-area:actions; }
.expressive .hero-copy>.hero-explore { grid-area:explore; }
.expressive .hero-copy>.hero-sizing-copy { visibility:hidden; pointer-events:none; }