.sync-public{--ink:#101c33;--muted:#535b69;--line:#dde2eb;--canvas:#f3f5f8;--brand:#284d85;--accent:#284d85;--deep:#101c33;--soft:#edf2fc;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55}
.sync-public .site-wrap{width:min(1232px,calc(100% - 48px))}
.sync-public .site-header{background:#101c33;color:white}
.sync-public .topbar{min-height:108px;gap:24px;padding:6px 0}
.sync-public .brand{gap:12px}
.sync-public .brand-title{font-size:16px;color:white}
.sync-public .logo-home{display:inline-flex;flex:none;border-radius:8px}
.sync-public .product-logo{width:96px;height:96px;object-fit:contain}
.sync-public .logo-home:focus-visible,.sync-public a:focus-visible{outline:3px solid #3566aa;outline-offset:4px}
.sync-public .nav a{color:white;border-color:transparent}
.sync-public .nav a.active,.sync-public .nav a:hover{background:#ffffff12;border-color:#ffffff38;color:white}
.sync-public .hero{background:transparent;border:0;padding:26px 0 0}
.sync-public .eyebrow{font-size:11px;letter-spacing:1.2px;margin-bottom:10px}
.sync-public h1,.sync-public .hero-title-compact{font-size:clamp(28px,3vw,36px);line-height:1.2;white-space:normal;max-width:none}
.sync-public .summary{font-size:18px;max-width:1000px;margin-top:12px}
.sync-public:not(.legal-page) .hero .meta-row{display:none}
.sync-public main{padding:22px 0 30px}
.sync-public .page-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.sync-public .form-card,.sync-public .section-card,.sync-public .company-card,.sync-public .status-card,.sync-public .token-card{padding:22px;border-radius:12px;box-shadow:none}
.sync-public .form-card h2,.sync-public .section-card h2{font-size:21px;line-height:1.3;margin-bottom:12px}
.sync-public .content-grid{gap:16px}
.sync-public .site-footer{background:transparent;padding:18px 0}
.sync-public .public-footer-links{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:12px;font-size:14px}
@media(max-width:1000px){.sync-public .topbar{flex-wrap:wrap;gap:12px}.sync-public .topbar-right{gap:10px}}
@media(max-width:760px){.sync-public .site-wrap{width:calc(100% - 40px)}.sync-public .topbar{flex-direction:row;align-items:center;padding:6px 0 14px}.sync-public .product-logo{width:84px;height:84px}.sync-public .brand-title{font-size:14px}.sync-public .topbar-right{width:100%;justify-content:space-between}.sync-public .lang-wrap{width:auto}.sync-public .nav{gap:4px}.sync-public .nav a{padding:7px 9px}.sync-public .page-grid{grid-template-columns:1fr}.sync-public .hero{padding-top:20px}.sync-public .form-card,.sync-public .section-card,.sync-public .company-card{padding:18px}.sync-public .summary{font-size:17px}}

/* Let operational and informational cards share the same grid and reading order. */
.sync-public .page-grid>.page-main,.sync-public .page-grid>.page-side,.sync-public .page-grid>.page-side>.content-grid{display:contents}
.sync-public .page-grid .form-card,.sync-public .page-grid .section-card,.sync-public .page-grid .company-card,.sync-public .page-grid .status-card{margin:0}
@media(min-width:1000px){.sync-public .page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep actions first, then compact independent information columns. */
.sync-public.compact-cards .page-grid{display:block}
.sync-public.compact-cards .page-grid>.page-main{display:block}
.sync-public.compact-cards .page-grid>.page-side>.content-grid{display:block;column-gap:16px}
.sync-public.compact-cards .page-grid .form-card,.sync-public.compact-cards .page-grid .company-card,.sync-public.compact-cards .page-grid .status-card,.sync-public.compact-cards .page-grid .section-card{break-inside:avoid;margin:0 0 16px}
@media(min-width:1000px){.sync-public.compact-cards .page-grid>.page-side>.content-grid{column-count:2}}

/* Public connection actions follow the institutional navy/blue palette. */
.sync-public .button.primary,.sync-public .icon-button.primary{background:#101c33;border-color:#101c33;color:#fff}
.sync-public .button.primary:hover:not(:disabled),.sync-public .icon-button.primary:hover:not(:disabled){background:#22375b;border-color:#22375b}
.sync-public .button.secondary:hover:not(:disabled){background:#edf2fc;border-color:#22375b;color:#22375b}
.sync-public .button:focus-visible,.sync-public .icon-button:focus-visible{outline:3px solid #3566aa;outline-offset:4px}
.sync-public .field input:focus,.sync-public .field select:focus{outline:2px solid #3566aa;border-color:#3566aa}
.sync-public .public-footer-links a{color:#284d85;text-decoration:underline;text-underline-offset:3px}
.sync-public .public-footer-links a:hover{color:#22375b}