/* SIDO Enterprise Corp. — base layer. Component styling is inline per element. */
/* Self-hosted fonts (Owner 2026-10-02). Files in /assets/fonts/ — see public/assets/fonts/README.md. */
@font-face{font-family:'Public Sans';src:url('fonts/public-sans-var.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-var.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
:root{
  --brand-navy:#132B5B;
  --brand-navy-deep:#0C1A38;
  --brand-navy-black:#070F22;
  --brand-ink:#0C1A38;
  --brand-gold:#A9853F;
  --brand-gold-bright:#CDA866;
  --brand-gold-deep:#6F4F1E;
  --brand-gold-tint:#FBF4E6;
  --brand-pewter:#6E7681;
  --brand-slate:#4E5C74;
  --brand-navy-bright:#1D3E7A;
  --brand-disabled-dark:#8391AB;
  --brand-mist:#EEF3FA;
  --brand-line:#E2E8F2;
  --brand-sky:#B9C6DE;
  --brand-success:#1B7F5C;
  --brand-success-ink:#115240;
  --brand-flag-ink:#96271C;
  --brand-pending-ink:#7A5100;
  --radius-field:10px;
  --radius:8px;
  --radius-lg:16px;
  --radius-pill:999px;
  --frame:1180px;
  --font-display:'Space Grotesk','Space Grotesk Fallback',Helvetica,Arial,sans-serif;
  --font-body:'Public Sans','Public Sans Fallback',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--brand-ink);font-family:var(--font-body);font-size:15px;line-height:1.6}
h1,h2,h3,h4{font-family:var(--font-display)}
img{max-width:100%;height:auto}
a{color:var(--brand-navy);text-decoration:none}
a:hover{color:var(--brand-pewter)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:8px;top:8px;padding:10px 16px;background:#fff;color:var(--brand-navy);border:1px solid var(--brand-gold);border-radius:var(--radius)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tw-caret::after{content:"";border-inline-end:3px solid var(--brand-gold);animation:sidoCaret 1.05s step-end infinite}
.tw-caret-sm::after{content:"";border-inline-end:2px solid var(--brand-gold-bright);animation:sidoCaret 1.05s step-end infinite}
@keyframes sidoReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sidoRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sidoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sidoCaret{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
.ticker-track:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* Hold the page for one frame while typewriter.js sets initial states, so content never flashes then hides. */
html.tw-wait main{opacity:0}

/* Hero credential lines: one line from 560px up; phones may wrap. */
.eyebrow-line{white-space:nowrap}
@media (max-width:560px){.eyebrow-line{white-space:normal;text-wrap:balance}}

/* Three equal columns (news, market tables); one column on narrow screens — never 2+1. */
@media (max-width:760px){.grid3{grid-template-columns:1fr!important}}

/* Four equal columns (Why choose us): 4 → 2 → 1. */
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.grid4{grid-template-columns:1fr!important}}

@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.foot-grid>:first-child{grid-column:1/-1}}
@media (max-width:1100px){#marketBox .grid3{grid-template-columns:1fr!important}}

/* Accessibility pass 2026-10-07 (WCAG 2.2 AA 2.4.7, 2.4.11): visible focus on the calculator amount field, which sets outline:none inline. */
#sendAmt:focus-visible{outline:2px solid var(--brand-gold)!important;outline-offset:-2px;border-radius:10px}