/* Brand parity with the live Intellect site; no effect on shipment state. */
:root { --soft:#f4fafc; --motion-fast:120ms; --motion-control:200ms; --motion-sheet:240ms; --ease-settle:cubic-bezier(.22,1,.36,1); }
body { background:var(--soft); }
.header-contact { background:var(--cyan); color:var(--ink); border:1px solid transparent; border-radius:100px; padding:0 24px; min-height:48px; gap:20px; }
.header-contact:hover { background:#36c0ff; }
.header .brand { width:132px; }
.header-label { font-size:13px; }
.eyebrow { text-transform:none; letter-spacing:.2px; font-size:12px; font-weight:500; }
.care-panel > .eyebrow { color:#a8def7; }
.care-title { font-weight:500; }
.care-intro { font-size:14px; line-height:1.8; }
.care-contact { padding-top:32px; }
.care-contact button { border-radius:100px; min-height:48px; }
.care-contact p { font-size:13px; }
.button { border-radius:100px; }
.mobile-dock .button,.email-action { background:var(--cyan); color:var(--ink); border-color:var(--cyan); }
.mobile-dock .button:hover,.email-action:hover { background:#36c0ff; }
.button.secondary { background:white; border-color:#9fb7c4; }
.identity .eyebrow { margin-bottom:4px; font-size:12px; }
.identity-note { font-size:12px; }
.status-pill { font-size:12px; padding:6px 12px; }
.schedule .eyebrow { font-size:12px; color:var(--muted); }
.status-description { max-width:58ch; }
.estimate-note,.update-row p,.privacy,.form-note,.dialog-note { font-size:12px; }
.activity summary,.secondary-nav summary { font-size:12px; }
.history strong { font-size:13px; }
.history time,.history p,.carrier { font-size:11px; }
.dialog-top .eyebrow,.dialog-reference .eyebrow { font-size:12px; }
.dialog-reference { background:var(--soft); }
.dialog-address { font-size:13px; }
.manual-form input:hover,dialog select:hover { border-color:var(--link); }
.manual-form input[aria-invalid="true"] { border:2px solid #a52d2d; }
.header-contact:focus-visible,.button:focus-visible,.copy-button:focus-visible,.dialog-close:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.care-contact button:focus-visible { outline:3px solid white; outline-offset:4px; }
/* The rings echo the company's Synapses identity, never a location/status indicator. */
.brand-connection { position:relative; width:140px; height:140px; margin:28px 0 12px; }
.brand-ring { position:absolute; display:block; border-radius:50%; transform-origin:center; }
.ring-outer { inset:0; border:1px solid #78b2c4; opacity:.45; }
.ring-middle { inset:16px; border:2px solid var(--cyan); border-left-color:transparent; border-bottom-color:#4f859b; transform:rotate(-28deg); }
.ring-inner { inset:32px; border:1px solid #8dccdf; opacity:.7; }
.brand-core { position:absolute; width:18px; height:18px; top:61px; left:61px; border-radius:50%; background:var(--ice); }
.brand-connector { position:absolute; width:45px; height:1px; background:#90d7f4; top:69px; left:79px; }
.connection-caption { color:#c0d3dc; font-size:12px; margin:0 0 4px; }
.ring-inner::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--ice); top:-3px; left:50%; }
.motion-control { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#c0d3dc; font-size:12px; cursor:pointer; }
.motion-control input { width:16px; height:16px; margin:0; accent-color:var(--cyan); }
.motion-control input:focus-visible { outline:2px solid white; outline-offset:4px; }
.care-panel:has(#pause-brand:checked) .brand-ring { animation-play-state:paused; }
/* Same ambient cadence as intellects.co.th; pausable and unrelated to shipment state. */
@media(prefers-reduced-motion:no-preference) {
  .ring-outer { animation:brand-breathe 3.8s ease-in-out infinite alternate; }
  .ring-middle { animation:brand-clockwise 24s linear infinite; }
  .ring-inner { animation:brand-counterclockwise 38s linear infinite; }
  .brand-core,.brand-connector { animation:connect-core 600ms var(--ease-settle) 160ms both; }
  .button,.header-contact,.copy-button,.care-contact button,.dialog-close { transition:background var(--motion-control),color var(--motion-control),transform var(--motion-fast) ease-out; }
  .button:active,.header-contact:active,.care-contact button:active,.dialog-close:active { transform:scale(.98); }
  dialog[open] { animation:contact-arrive var(--motion-sheet) var(--ease-settle) both; }
  dialog[open]::backdrop { animation:backdrop-arrive 180ms ease-out both; }
  .activity[open] .history { animation:activity-arrive 180ms var(--ease-settle) both; }
  .toast:not(:empty) { animation:toast-arrive 150ms ease-out both; }
}
@keyframes brand-breathe { from { opacity:.65;transform:scale(.96); } to { opacity:1;transform:scale(1.04); } }
@keyframes brand-clockwise { from { transform:rotate(0turn); } to { transform:rotate(1turn); } }
@keyframes brand-counterclockwise { from { transform:rotate(0turn); } to { transform:rotate(-1turn); } }
@keyframes connect-core { from { opacity:0; } to { opacity:1; } }
@keyframes contact-arrive { from { opacity:.5;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } }
@keyframes backdrop-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes activity-arrive { from { opacity:.6;transform:translateY(-3px); } to { opacity:1;transform:translateY(0); } }
@keyframes toast-arrive { from { opacity:0; } to { opacity:1; } }
@media(max-width:980px) { .header-contact { padding:0 20px; } .brand-connection { margin-top:24px; } }
@media(max-width:760px) {
  .header .brand { width:108px; }
  .header-contact { min-height:44px; padding:0 16px; font-size:11px; gap:12px; }
  .brand-connection,.connection-caption,.motion-control { display:none; }
  .identity .eyebrow,.schedule .eyebrow,.dialog-top .eyebrow { font-size:11px; }
  .status-pill { font-size:11px; padding:5px 10px; }
  .status-description,.next-step p,.care-intro { font-size:12px; }
  .estimate-note,.update-row p,.privacy,.form-note { font-size:11px; }
  .update-row p { max-width:210px; }
  .activity summary,.secondary-nav summary { font-size:12px; }
  .history time,.history p { font-size:11px; }
  .carrier { font-size:10px; }
  .progress li { font-size:9px; }
  .mobile-dock .button { min-height:44px; }
  .care-panel > .eyebrow { font-size:11px; }
  @keyframes contact-arrive { from { opacity:.75;transform:translateY(24px); } to { opacity:1;transform:translateY(0); } }
}
@media(prefers-reduced-motion:reduce) {
  .motion-control { display:none; }
  .brand-ring,.brand-core,.brand-connector,dialog[open],dialog[open]::backdrop,.activity[open] .history,.toast { animation:none!important; transition:none!important; }
  .button,.header-contact,.copy-button,.care-contact button,.dialog-close { transition:none!important; transform:none!important; }
}
@media print { .brand-connection,.connection-caption,.motion-control { display:none; } }