/* The Resource Center: guides and free tools at /resources/. White space, one idea per section, and type that's easy to read. */
:root { --ink: #001A6E; --text: #27345A; --muted: #5A6785; --brand: #0070FF; --link: #005BD1; --sky: #EAF4FF; --cyan: #19D9F4; --line: #E4EAF4; --fill: #F5F8FD; --page: 1120px; --read: 700px; }
* { box-sizing: border-box; margin: 0; }
html { scroll-padding-top: 88px; background: #00052E; }
body { color: var(--text); background: #fff; font: 400 17px/1.65 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.011em; -webkit-font-smoothing: antialiased; }
img, svg { display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; }
h1, h2, h3, b, strong { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.skip { position: fixed; top: -80px; left: 12px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: #fff; } .skip:focus { top: 12px; }

/* Bar: the same glass bar as the Services page. */
.rnav { position: sticky; top: 10px; z-index: 30; width: min(1120px, 100% - 48px); margin: 10px auto -70px; border: 1px solid transparent; border-radius: 980px; background: linear-gradient(135deg, rgba(40, 70, 170, .5), rgba(10, 30, 110, .42)); -webkit-backdrop-filter: blur(44px) saturate(200%) brightness(.82); backdrop-filter: blur(44px) saturate(200%) brightness(.82); box-shadow: 0 10px 34px rgba(9, 45, 140, .14), inset 0 1px 0 rgba(255, 255, 255, .8); line-height: 1.47; }
.rnav::before, .hpanel::before { content: ""; position: absolute; inset: -1px; z-index: 1; padding: .5px; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .16) 38%, rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, .34)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.rnw { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; height: 60px; padding: 0 10px 0 24px; }
.rnav .word { position: relative; display: inline-flex; align-items: center; flex: none; }
.rnav .word img { display: block; width: auto; height: 46px; transition: opacity .5s ease, filter .5s ease; }
.rnav .word .sy, .rnav.small .word .full { opacity: 0; filter: blur(8px); pointer-events: none; }
.rnav .word .sy { position: absolute; left: -4%; top: 50%; height: 72%; translate: 0 -50%; }
.rnav.small .word .sy { opacity: 1; filter: blur(0); }
.rnav nav a, .rnav .right a { color: #fff; text-decoration: none; white-space: nowrap; }
.rnav nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; font-weight: 600; letter-spacing: -.012em; }
.rnav nav a { opacity: .92; transition: opacity .2s; } .rnav nav a:hover { opacity: 1; }
.rnav .right { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; }
.rnav .signin { opacity: .92; } .rnav .signin:hover { opacity: 1; }
.rnav .become { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 980px; transition: background .2s, border-color .2s; } .rnav .become:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.rnav .in-menu { display: none; }
.menu-btn { display: none; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: transparent; color: #fff; } .menu-btn svg { width: 24px; height: 24px; }

/* Hero */
.rtop { margin-top: -2px; padding: 124px 20px 64px; background: #00052E url("/assets/background.webp?v=1") center top / cover no-repeat; text-align: center; }
.rkick { color: #9CCBFF; font-size: 14px; font-weight: 600; }
.rtop h1 { max-width: 820px; margin: 10px auto 0; font-size: clamp(42px, 6.6vw, 68px); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; } .rtop h1 em { font-style: normal; }
.rlede { max-width: 560px; margin: 16px auto 0; color: #DBE7FF; font-size: 20px; line-height: 1.45; }
.rfind { position: relative; z-index: 5; max-width: 620px; margin: 32px auto 0; text-align: left; } .rfind input { width: 100%; height: 62px; padding: 0 24px 0 54px; border: 1px solid var(--line); border-radius: 980px; outline: none; background: #fff; color: var(--ink); font-size: 17px; box-shadow: 0 14px 40px rgba(0, 26, 110, .1); } .rfind input:focus { border-color: var(--brand); } .rfind input::placeholder { color: #6B7893; } .rfind svg { position: absolute; top: 21px; left: 22px; width: 20px; height: 20px; color: var(--muted); }
.rhits { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 20; overflow: auto; max-height: 340px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 22px 60px rgba(0, 26, 110, .16); } .rhits a { display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; } .rhits a:hover, .rhits a:focus { background: var(--fill); } .rhits b { display: block; font-size: 15.5px; font-weight: 600; } .rhits small { color: var(--muted); font-size: 13.5px; } .rhits p { padding: 10px 14px; color: var(--muted); font-size: 15px; }
.rpop { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14.5px; } .rpop a { display: block; padding: 6px 13px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--text); text-decoration: none; } .rpop a:hover { border-color: var(--brand); color: var(--ink); }
.rst { display: inline-flex; gap: 2px; padding: 3px; border-radius: 980px; background: #EDF1F8; } .rst button { height: 34px; padding: 0 16px; border: 0; border-radius: 980px; background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 500; } .rst button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 26, 110, .12); }

.rtop h1, .gtop h1 { color: #fff; } .gtop .crumb, .gtop .crumb a, .gtop > div p.gsub, .gtop p.gmeta { color: #DBE7FF; } .gtop .rst { background: rgba(255, 255, 255, .16); } .gtop .rst button { color: #fff; } .gtop .rst button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.gwrap { margin-top: 36px; }

/* Resources home: the Services page layout. */
body.rhub { background: transparent; }
.dot { color: var(--brand); }
.sky { position: fixed; inset: 0; z-index: -1; background: #00052E url("/assets/background.webp?v=1") center / cover no-repeat; } .sky::after { content: ""; position: absolute; inset: 0; background: url("/assets/grain.png?v=1"); mix-blend-mode: overlay; opacity: .55; pointer-events: none; }
.waves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; } .waves.on { opacity: 1; }
.hw { width: min(1120px, 100% - 48px); margin-inline: auto; }
.hstage { position: relative; padding: 96px 0 84px; }
.hpanel { position: relative; border: 1px solid transparent; border-radius: 36px; background: linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, .15)); -webkit-backdrop-filter: blur(56px) saturate(210%) brightness(1.12); backdrop-filter: blur(56px) saturate(210%) brightness(1.12); box-shadow: 0 40px 100px rgba(0, 6, 40, .55), 0 8px 24px rgba(0, 6, 40, .3), inset 0 1px 1px rgba(255, 255, 255, .32), inset 0 0 40px rgba(255, 255, 255, .05); }
.hbar { display: flex; align-items: center; gap: 16px; padding: 20px 24px 0; }
.htabs { display: flex; gap: 2px; padding: 4px; border-radius: 980px; background: rgba(255, 255, 255, .14); }
.htab { appearance: none; min-height: 40px; padding: 0 22px; border: 0; border-radius: 980px; background: transparent; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.012em; white-space: nowrap; transition: background .25s, box-shadow .25s, color .25s; } .htab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(11, 15, 20, .14); }
.hnote { margin-left: auto; color: rgba(255, 255, 255, .82); font-size: 13px; }
.hbody { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; padding: 18px 24px 24px; }
.hlist { display: flex; flex-direction: column; gap: 8px; } .hlist[hidden] { display: none; }
.hrow { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.014em; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; } .hrow:hover { background: rgba(255, 255, 255, .26); box-shadow: 0 12px 30px rgba(0, 6, 40, .3), inset 0 1px 0 rgba(255, 255, 255, .34); transform: translateY(-1px); }
.hri { display: grid; place-items: center; width: 42px; height: 42px; flex: none; padding: 10px; border-radius: 14px; background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(11, 15, 20, .08); } .hri svg { width: 100%; height: 100%; }
.hrt { min-width: 0; } .hrt small { display: -webkit-box; margin-top: 3px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: -.008em; }
.hmain { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hask { position: relative; z-index: 3; padding: 30px 32px 24px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 28px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 16px 40px rgba(0, 6, 40, .22), inset 0 1px 0 rgba(255, 255, 255, .9); }
.hask h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.htag { margin-top: 10px; color: #33415F; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.4; }
.hask .rfind { max-width: none; margin-top: 20px; }
.hask .rfind input { position: relative; z-index: 1; height: 64px; border: 0; box-shadow: 0 8px 28px rgba(9, 45, 140, .14); font-size: 18px; } .hask .rfind input:focus { box-shadow: 0 8px 28px rgba(9, 45, 140, .14); }
.hask .rfind svg { z-index: 2; }
.hask .rfind::before { content: ""; position: absolute; inset: -2px; z-index: 0; height: 68px; border-radius: 980px; background: conic-gradient(from var(--spin, 0deg), #0070FF, #38BDF8, #8B5CF6, #EC4899, #0070FF); animation: hspin 7s linear infinite; pointer-events: none; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hspin { to { --spin: 360deg; } }
.hask .rpop { justify-content: flex-start; margin-top: 16px; }
.hphoto { position: relative; flex: 1; min-height: 390px; overflow: hidden; border-radius: 28px; background: var(--ink); } .hphoto[hidden] { display: none; }
.hphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; }
.hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 28px 40px; background: linear-gradient(90deg, rgba(11, 15, 20, .88) 0, rgba(11, 15, 20, .68) 40%, rgba(11, 15, 20, .08) 74%, rgba(11, 15, 20, 0) 100%); color: #fff; }
.hover h2 { max-width: 420px; color: #fff; font-size: clamp(26px, 2.7vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
.hover p { max-width: 400px; margin-top: 10px; color: #DFE3E8; font-size: 16px; line-height: 1.47; }
.hbtn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; padding: 0 20px; border-radius: 980px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; } .hbtn:hover { background: var(--sky); }
.hsec { padding: 80px 0; background: #fff; scroll-margin-top: 80px; } .hsec.band { background: var(--sky); }
.hsech { margin-bottom: 44px; text-align: center; } .hsech h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; } .hsech p { max-width: 32em; margin: 14px auto 0; color: #5B6470; font-size: clamp(19px, 2vw, 21px); line-height: 1.35; }
.hsec .rfeat { margin-top: 0; } .hsec .rstate { background: #fff; box-shadow: 0 16px 50px rgba(9, 45, 140, .08); } .hsec .rstate h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.035em; } .hsec .rcities a { background: var(--sky); }
.hsec .rdir { margin-top: 0; } .hsec .rdir > div { padding: 24px; border: 1px solid var(--line); border-radius: 24px; } .hsec .rdir h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.hsec .rfaq { max-width: 760px; margin: 0 auto; border-top-color: #CFDDF2; } .hsec .rfaq details { border-bottom-color: #CFDDF2; }
.hsec .rnote { width: auto; max-width: 760px; margin: 28px auto 0; }
.hclose { padding: 80px 0; background: var(--ink); color: #fff; text-align: center; } .hclose img { width: min(300px, 70vw); height: auto; margin: 0 auto 34px; } .hclose h2 { color: #fff; font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; } .hclose p { max-width: 30em; margin: 14px auto 26px; color: #AEB6C2; font-size: clamp(19px, 2vw, 21px); line-height: 1.35; } .hcta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* SueYou PRO. */
.rnav .wpro { margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: linear-gradient(135deg, #F6F8FA, #AEB6C1 44%, #E8EBEF 62%, #8C95A3); color: #1B2331; font-size: 11px; font-weight: 700; letter-spacing: .05em; } .rnav.small .wpro { opacity: 0; }
.rnav button.become { background: none; color: #fff; font: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.hpill { padding: 8px 16px; border-radius: 980px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 14px; font-weight: 600; }
.hpair { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .rbtn.soft { background: var(--sky); color: var(--ink); } .rbtn.soft:hover { background: var(--line); } .rbtn { cursor: pointer; }
.hsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: st; } .hsteps li { padding: 24px; border: 1px solid var(--line); border-radius: 24px; counter-increment: st; } .hsteps li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; }
.hsteps h3, .hcard h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } .hsteps p, .hcard p { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.hcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hcard { padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: #fff; } .band .hcard { border-color: transparent; box-shadow: 0 16px 50px rgba(9, 45, 140, .06); }
.hrow[href^="#"] .hrt { white-space: normal; }

/* Footer: the same one as the Services page. */
body:not(.rhub) .rfoot { margin-top: 44px; }
.rfoot { padding: 40px 0 36px; background: var(--sky); color: #5B6470; font-size: 12px; line-height: 1.5; letter-spacing: -.012em; }
.rfoot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .rfoot h4 { margin: 0 0 10px; color: var(--ink); font-size: 12px; font-weight: 600; } .rfoot ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .rfoot .cols a { color: #424245; text-decoration: none; } .rfoot .cols a:hover { text-decoration: underline; }
.rfoot .brandline { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid #E5E7EB; } .rfoot .brandline img { width: auto; height: 42px; }
.rfoot .legal { max-width: 100ch; margin-top: 14px; } .rfoot .legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .rfoot .pc { display: inline-flex; align-items: center; gap: 7px; } .rfoot .pc-ic { width: 30px; height: 14px; color: var(--brand); flex: none; }

/* Sections */
.rsec { width: min(var(--page), 100% - 40px); margin: 0 auto; padding: 72px 0 0; } .rsec > h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; } .rsec > p { max-width: 620px; margin-top: 8px; color: var(--muted); font-size: 18px; }
.rsit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 22px; border-top: 1px solid var(--line); }
.rsit a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; } .rsit a > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sky); color: var(--brand); } .rsit svg { width: 22px; height: 22px; } .rsit b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; } .rsit span { display: block; margin-top: 1px; color: var(--muted); font-size: 15px; line-height: 1.35; } .rsit em { color: #A6B2C8; font-style: normal; font-size: 20px; line-height: 1; transition: transform .18s ease, color .18s ease; } .rsit a:hover b { color: var(--link); } .rsit a:hover em { color: var(--brand); transform: translateX(3px); }
.rfeat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: center; margin-top: 22px; padding: 44px; border-radius: 28px; background: var(--ink); color: #fff; overflow: hidden; } .rfeat small { color: var(--cyan); font-size: 14px; font-weight: 600; } .rfeat h3 { margin-top: 6px; color: #fff; font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; } .rfeat p { max-width: 460px; margin-top: 10px; color: #C9D8F5; font-size: 18px; line-height: 1.45; } .rfeat .rbtn { margin-top: 22px; }
.rmock { justify-self: center; width: min(300px, 100%); margin-bottom: -96px; padding: 24px 24px 90px; border-radius: 14px 14px 0 0; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); transform: rotate(-2deg); } .rmock b { display: block; font-size: 13px; font-weight: 700; } .rmock i { display: block; height: 7px; margin-top: 9px; border-radius: 4px; background: #E6ECF6; } .rmock i:nth-child(3) { width: 84%; } .rmock i:nth-child(5) { width: 62%; } .rmock u { display: block; margin-top: 16px; font-size: 19px; font-weight: 700; text-decoration: none; color: var(--brand); }
.rtools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .rtools a { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: border-color .18s ease; } .rtools a:hover { border-color: var(--brand); } .rtools b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; } .rtools span { display: block; margin-top: 3px; color: var(--muted); font-size: 14.5px; line-height: 1.35; }
.rstate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 40px; border-radius: 28px; background: var(--fill); } .rstate h2 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; } .rstate p { margin-top: 8px; color: var(--muted); font-size: 18px; } .rstate select { display: block; width: 100%; height: 56px; margin-top: 20px; padding: 0 16px; border: 1px solid #CFD8E8; border-radius: 14px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 500; } .rstate .all { display: inline-block; margin-top: 12px; color: var(--link); font-size: 15.5px; font-weight: 500; }
.rcities b { display: block; font-size: 14px; font-weight: 600; } .rcities ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; } .rcities a { display: block; padding: 7px 14px; border-radius: 980px; background: #fff; text-decoration: none; } .rcities a:hover { color: var(--link); }
.rdir { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 34px 40px; margin-top: 24px; } .rdir h3 { font-size: 16px; font-weight: 600; } .rdir ul { margin: 8px 0 0; padding: 0; list-style: none; } .rdir li { margin-top: 7px; font-size: 16px; line-height: 1.35; } .rdir a { color: var(--text); text-decoration: none; } .rdir a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 22px; }
.rcard { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; transition: border-color .18s ease; } .rcard:hover { border-color: var(--brand); } .rcard small { color: var(--muted); font-size: 13.5px; } .rcard b { margin-top: 2px; font-size: 17.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; } .rcard span { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.rcard.dark { border: 1px solid var(--line); background: #fff; }
.rtable { width: 100%; margin-top: 16px; overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 16px; } .rtable th, .rtable td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .rtable tr:last-child th, .rtable tr:last-child td { border-bottom: 0; } .rtable th { color: var(--ink); font-weight: 500; } .rtable a { color: var(--link); } .rtable thead th { background: var(--fill); font-weight: 600; }
.rfaq { max-width: 780px; margin-top: 20px; border-top: 1px solid var(--line); } .rfaq details { border-bottom: 1px solid var(--line); } .rfaq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; list-style: none; cursor: pointer; } .rfaq summary::-webkit-details-marker { display: none; } .rfaq summary::after { content: "+"; color: var(--muted); font-size: 22px; font-weight: 400; line-height: 1.1; } .rfaq details[open] summary::after { content: "−"; } .rfaq p { padding: 0 0 18px; color: var(--text); font-size: 16.5px; } .rfaq a { color: var(--link); }
.rband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; width: min(var(--page), 100% - 40px); margin: 72px auto 0; padding: 36px 40px; border-radius: 24px; background: var(--ink); color: #fff; } .rband h2 { color: #fff; font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; } .rband p { max-width: 560px; margin-top: 6px; color: #C9D8F5; font-size: 17px; line-height: 1.45; } .rband > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.rbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 980px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; } .rbtn.line { border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; } .rbtn.blue { background: var(--brand); color: #fff; } .rbtn.soft { background: var(--sky); color: var(--ink); }
.rnote { width: min(var(--page), 100% - 40px); margin: 44px auto 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .rend { height: 40px; }

/* Guides */
.gtop { margin-top: -2px; padding: 112px 20px 44px; background: #00052E url("/assets/background.webp?v=1") center top / cover no-repeat; } .gtop > div { width: min(1000px, 100%); margin: 0 auto; } .crumb { color: var(--muted); font-size: 14.5px; } .crumb a { color: var(--muted); } .gtop h1 { max-width: var(--read); margin-top: 10px; font-size: clamp(36px, 5vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; } .gtop p.gsub { max-width: var(--read); margin-top: 12px; color: var(--muted); font-size: 21px; line-height: 1.4; } .gmeta { margin-top: 12px; color: var(--muted); font-size: 14px; } .gtop .rst { margin-top: 16px; }
.gwrap { display: grid; grid-template-columns: minmax(0, var(--read)) 220px; justify-content: space-between; gap: 48px; width: min(1000px, 100% - 40px); margin: 28px auto 0; } .gbody { min-width: 0; font-size: 18px; line-height: 1.7; } .gtoc { position: sticky; top: 92px; align-self: start; font-size: 14.5px; } .gtoc b { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; } .gtoc a { display: block; padding: 5px 0; color: var(--muted); line-height: 1.3; text-decoration: none; } .gtoc a:hover { color: var(--ink); }
.gbody h2 { margin-top: 44px; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.028em; } .gbody h3 { margin-top: 26px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; } .gbody p { margin-top: 12px; } .gbody ul, .gbody ol { margin-top: 12px; padding-left: 22px; } .gbody li { margin-top: 8px; } .gbody a { color: var(--link); text-underline-offset: 2px; }
.gquick { padding: 20px 24px; border-radius: 18px; background: var(--sky); } .gquick b { display: block; font-size: 14px; font-weight: 600; color: var(--link); } .gquick p { margin-top: 4px; color: var(--ink); font-size: 19px; line-height: 1.5; }
.gstate { margin-top: 16px; padding: 16px 20px; border-radius: 16px; background: var(--fill); } .gstate b.t { display: block; color: var(--brand); font-size: 14px; font-weight: 600; } .gstate p:first-of-type { margin-top: 2px; } .gstate ul { margin-top: 6px; }
.gwarn { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: #FFF6E5; color: #5A3C00; font-size: 16.5px; } .gwarn b { color: inherit; }
.gsrc { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; } .gsrc h2 { margin-top: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .gsrc ul { padding-left: 18px; } .gsrc li { margin-top: 4px; overflow-wrap: anywhere; }
html[data-state="CA"] [data-only="NV"], html[data-state="NV"] [data-only="CA"] { display: none; }

/* Tools */
.tbox { padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; font-size: 16.5px; box-shadow: 0 10px 34px rgba(0, 26, 110, .06); } .tbox label { display: block; margin-top: 16px; color: var(--ink); font-size: 15.5px; font-weight: 500; } .tbox label:first-child { margin-top: 0; } .tbox label small { display: block; color: var(--muted); font-weight: 400; } .tbox input, .tbox select, .tbox textarea { display: block; width: 100%; min-height: 50px; margin-top: 6px; padding: 11px 14px; border: 1px solid #CFD8E8; border-radius: 12px; background: #fff; font-size: 16px; } .tbox textarea { min-height: 96px; resize: vertical; } .ttwo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tbox .ttwo label { margin-top: 0; } .tbox .ttwo + * , .tbox .ttwo + .ttwo { margin-top: 16px; }
.tres { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--sky); } .tres b.big { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; } .tres p { margin-top: 6px; } .tres.no { background: #FFF6E5; color: #5A3C00; } .tres.no b { color: inherit; }
.tchk { padding: 0; list-style: none; } .tchk li { margin-top: 0; border-top: 1px solid var(--line); } .tchk li:first-child { border-top: 0; } .tchk label { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 2px; font-weight: 400; } .tchk input { flex: none; width: 20px; min-height: 0; height: 20px; margin: 3px 0 0; }
.tletter { white-space: pre-wrap; margin-top: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: 400 15.5px/1.6 Georgia, "Times New Roman", serif; }
.tacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tbox label.tck { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; } .tbox .tck input { flex: none; width: 20px; min-height: 0; height: 20px; margin: 3px 0 0; }
.tchecks { margin: 14px 0 0; padding: 0; list-style: none; } .tchecks li { margin-top: 6px; padding: 11px 14px; border-radius: 12px; background: var(--sky); font-size: 15.5px; } .tchecks li.bad { background: #FFF6E5; color: #5A3C00; }
.tres + .rtable { margin-top: 12px; }
.tmore { margin-top: 14px; color: var(--muted); font-size: 14.5px; }

/* Small claims */
.scmap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 860px; margin: 24px auto 0; } .scmap a { display: grid; place-content: center; aspect-ratio: 1; min-width: 0; border-radius: 10px; color: #fff; text-align: center; text-decoration: none; transition: transform .15s ease, opacity .15s ease; } .scmap a:hover { transform: scale(1.1); z-index: 1; } .scmap a.dim { opacity: .2; } .scmap b { color: inherit; font-size: 15px; line-height: 1.1; } .scmap small { font-size: 11px; font-weight: 600; opacity: .9; }
.t0 { background: #8A95AD; } .t1 { background: #2B86F5; } .t2 { background: #0E66DD; } .t3 { background: #0A4FBE; } .t4 { background: #063A98; } .t5 { background: #00206E; }
.sckey { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: #fff; } .sckey li { padding: 2px 10px; border-radius: 999px; }
.sctw { overflow-x: auto; } .sct { min-width: 760px; font-size: 15px; } .sct th { width: auto; } .sct thead button { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; } .sct thead button::after { content: " ↕"; color: var(--muted); font-weight: 400; } .sct tr[hidden], .rcard[hidden] { display: none; }
.scfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; border: 1px solid var(--line); border-radius: 18px; } .scf { padding: 20px 22px; border-left: 1px solid var(--line); } .scf:first-child { border-left: 0; } .scf small { display: block; color: var(--muted); font-size: 14px; } .scf b { display: block; margin-top: 2px; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.gbody .rtable th { width: 38%; }

@media (max-width: 960px) { .rtools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rstate { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; } }
@media (max-width: 860px) { .gwrap { grid-template-columns: minmax(0, 1fr); gap: 0; } .gtoc { display: none; } .rsit { grid-template-columns: minmax(0, 1fr); } .rfeat { grid-template-columns: minmax(0, 1fr); padding: 30px 26px 0; } .rmock { margin: 20px auto -60px; } }
@media (max-width: 620px) { body { font-size: 16.5px; } html { scroll-padding-top: 74px; } .rtop { padding: 96px 16px 44px; }  .rlede { font-size: 18px; } .rfind input { height: 56px; font-size: 16px; } .rfind svg { top: 18px; } .rsec { width: calc(100% - 32px); padding-top: 52px; } .rsec > p { font-size: 17px; } .rtools { grid-template-columns: minmax(0, 1fr); } .rband { width: calc(100% - 32px); margin-top: 52px; padding: 26px 22px; border-radius: 20px; } .rnote { width: calc(100% - 32px); } .gtop { padding: 92px 16px 32px; } .gtop p.gsub { font-size: 19px; } .gwrap { width: calc(100% - 32px); } .gbody { font-size: 17px; } .gbody h2 { font-size: 24px; margin-top: 36px; } .gquick p { font-size: 17.5px; } .ttwo { grid-template-columns: 1fr; gap: 0; } .tbox .ttwo label { margin-top: 16px; } .tbox .ttwo label:first-child { margin-top: 0; } .tbox { padding: 18px; } .scfs { grid-template-columns: minmax(0, 1fr); } .scf { border-left: 0; border-top: 1px solid var(--line); } .scf:first-child { border-top: 0; } .scmap { gap: 2px; } .scmap a { border-radius: 6px; } .scmap b { font-size: 11px; } .scmap small { display: none; } .rsit a { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 12px; padding: 15px 0; } .rsit a > i { width: 40px; height: 40px; } .rsit b { font-size: 17px; } }
@media (max-width: 1040px) { .hbody { grid-template-columns: minmax(0, 1fr); } .hmain { order: 1; } .hlist { order: 2; flex-direction: row; flex-wrap: wrap; } .hrow { flex: 1 1 calc(50% - 4px); min-height: 64px; } .hnote { display: none; } .hbar { justify-content: center; } }
@media (max-width: 860px) { .hsteps, .hcards { grid-template-columns: minmax(0, 1fr); } .hsec, .hclose { padding: 64px 0; } .rfoot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .menu-btn { display: grid; } .rnav .become { display: none; } .rnav .right { gap: 6px; font-size: 14px; } .rnav nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; max-height: calc(100dvh - 120px); overflow-y: auto; padding: 6px 22px 10px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 28px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); box-shadow: 0 18px 50px rgba(9, 45, 140, .2); font-size: 17px; } .rnav.open nav { display: flex; } .rnav nav a { color: var(--ink); } .rnav nav a, .rnav nav .in-menu { display: flex; align-items: center; min-height: 48px; opacity: 1; } .rnav nav a + a { border-top: 1px solid rgba(0, 0, 0, .07); } }
@media (max-width: 560px) { .hw { width: calc(100% - 24px); } .rnav { width: calc(100% - 24px); top: 8px; margin: 8px auto -66px; } .rnw { gap: 6px; height: 58px; padding: 0 6px 0 16px; } .rnav .right { margin-left: auto; } .rnav .word img { height: 49px; } .hsec { scroll-margin-top: 74px; } .hstage { padding: 82px 0 64px; } .hpanel { border-radius: 30px; } .hbar { padding: 10px 10px 0; } .htabs { width: 100%; } .htab { flex: 1; min-height: 44px; padding: 0 4px; font-size: 14px; } .hbody { gap: 10px; padding: 10px; } .hmain { gap: 10px; } .hask { padding: 20px 16px 16px; border-radius: 24px; } .hask h1 { font-size: 31px; } .hask .rfind input { height: 58px; font-size: 16.5px; } .hask .rfind::before { height: 62px; } .hphoto { min-height: 400px; border-radius: 24px; } .hover { padding: 22px; justify-content: flex-end; background: linear-gradient(0deg, rgba(11, 15, 20, .94) 0, rgba(11, 15, 20, .8) 46%, rgba(11, 15, 20, .08) 82%); } .hover h2, .hover p { max-width: none; } .hphoto img { height: 62%; object-position: 72% 20%; } .hrow { flex-basis: 100%; min-height: 60px; } .hsech { margin-bottom: 32px; } }
@media (max-width: 350px) { .rnw { gap: 6px; } .rnav .word img { height: 37px; } }
/* Wide and short, like a wide phone held sideways. */
@media (min-width: 621px) and (max-height: 640px) { html { scroll-padding-top: 58px; } .rtop { padding: 84px 20px 26px; }  .rtop h1 { font-size: 40px; } .rlede { margin-top: 6px; font-size: 17px; } .rfind { margin-top: 16px; } .rfind input { height: 50px; } .rfind svg { top: 15px; } .rpop { margin-top: 10px; } .rsec { padding-top: 44px; } .gtop { padding-top: 84px; } .gtop h1 { font-size: 34px; } .gtop p.gsub { font-size: 18px; } .gtoc { top: 62px; } .scmap { max-width: 640px; } .rfeat { padding: 28px 30px; } }
@media print { .rnav, .rfind, .rpop, .rfoot, .rband, .gtoc, .rst, .tbox, .tacts, .rnote { display: none !important; } .gwrap { display: block; width: 100%; margin: 0; } .tletter { margin: 0; border: 0; padding: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .hask .rfind::before { animation: none; } html { scroll-behavior: auto; } }