:root {
--navy:#06184a;
--blue:#0872fa;
--ink:#14203a;
--muted:#667085;
--line:#e1e8f1;
--max:1760px
}
* {
	box-sizing:border-box
}
html {
	scroll-behavior:smooth
}
section{scroll-margin-top:20px;}
.document h2{scroll-margin-top:100px;}
body {
	margin:0;
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	color:var(--ink);
	background:#fff;
	-webkit-font-smoothing:antialiased
}
.container {
	width: calc(100% - clamp(48px, 6vw, 120px));
	margin:auto
}
a {
	text-decoration:none;
	color:inherit; transition: 0.3s ease-in-out;
}
.site-header {
	height:82px;
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(255, 255, 255, .97);
	backdrop-filter:blur(12px);
	border-bottom:1px solid #e7edf4
}
.header-inner {
	width: calc(100% - clamp(48px, 6vw, 120px));
	height:100%;
	margin:auto;
	display:flex;
	align-items:center;
	gap:35px
}
.brand {
	display:block;
	color:var(--navy);
	font-weight:900;
	white-space:nowrap;
	line-height:.92
}
.brand>span {
	font-size:27px;
	letter-spacing:-.05em
}
.brand strong {
	color:var(--blue)
}
.brand small {
	display:block;
	font-size:10px;
	letter-spacing:0;
	margin-top:7px
}
.header-inner nav {
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:clamp(15px, 1.35vw, 27px);
	font-size:14px;
	font-weight:750
}
.header-inner nav a.btn{font-size: 16px;}
.header-inner nav>a:not(.btn):hover {
color:var(--blue)
}
.menu {
	display:none;
	margin-left:auto;
	border:0;
	background:none
}
.menu span {
	display:block;
	width:25px;
	height:2px;
	background:var(--navy);
	margin:5px 0;
}
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	min-height:52px;
	padding:0 28px;
	border-radius:7px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:900;
	letter-spacing:.02em
}
.btn b {
	font-size:22px;
	line-height:0
}
.btn-primary {
	background:linear-gradient(135deg, #0876ff, #0560df);
	color:#fff;
	box-shadow:0 10px 25px rgba(8, 114, 250, .18)
}
.btn-outline {
	background:#fff;
	border:2px solid var(--blue);
	color:#0a3477
}
.btn-dark-outline {
	border:1px solid rgba(255, 255, 255, .8);
	color:#fff
}
.compact {
	min-height:48px;
	padding:0 23px
}
.hero {
	position:relative;
	min-height:760px;
	overflow:hidden;
	background:linear-gradient(90deg, rgba(245, 250, 254, .90) 8%, rgba(245, 250, 254, .70) 40%, rgba(245, 250, 254, 0) 52%), url("images/hero-banner.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.hero-grid {
	position:relative;
	z-index:2;
	min-height:760px;
	display:grid;
grid-template-columns:minmax(610px, .92fr) minmax(650px, 1.08fr);
	align-items:center;
	gap:30px
}
.eyebrow {
	text-transform:uppercase;
	letter-spacing:.1em;
	color:#375c91;
	font-size:12px;
	font-weight:900;
	margin:0 0 18px
}
.hero h1 {
	font-size:clamp(60px, 4.2vw, 82px);
	line-height:.96;
	letter-spacing:-.055em;
	color:var(--navy);
	margin:0 0 25px
}
.hero h1 span, h2 span {
	color:var(--blue)
}
.hero-lead {
	font-size:20px;
	font-weight:680;
	line-height:1.5;
	max-width:750px;
	margin:0 0 16px
}
.hero-body {
	font-size:16px;
	line-height:1.55;
	max-width:750px;
	margin:0
}
.actions {
	display:flex;
	gap:16px;
	flex-wrap:wrap;
	margin-top:30px
}
.value-row {
	display:flex;
	gap:28px;
	margin-top:40px
}
.value-row>div {
	display:flex;
	align-items:center;
	gap:11px;
	padding-right:26px;
	border-right:1px solid #cad6e5
}
.value-row>div:last-child {
	border:0
}
.value-row i {
	font-style:normal;
	color:#075acb;
	font-size:34px;
	font-weight:900
}
.value-row span {
	font-size:11px;
	line-height:1.25
}
.value-row strong {
	display:block
}
.hero-dashboard {
	height:575px;
	position:relative
}
.floating-card {
	background:rgba(255, 255, 255, .98);
	border:1px solid #dbe5f0;
	border-radius:16px;
	box-shadow:0 24px 55px rgba(12, 44, 83, .18)
}
.opportunities {
	position:absolute;
	right:0;
	top:16px;
	width:500px;
	padding:20px
}
.floating-title {
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:15px;
	color:var(--navy)
}
.floating-title span {
	font-size:10px;
	background:#eef7ff;
	color:#48647f;
	padding:8px 10px;
	border-radius:8px
}
.opp-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin:15px 0
}
.opp-grid>div {
	display:flex;
	align-items:center;
	gap:13px;
	border:1px solid #e1e8f1;
	border-radius:9px;
	padding:12px 14px;
	background:#fff
}
.opp-grid i {
	font-style:normal;
	font-size:25px;
	color:var(--blue)
}
.opp-grid i.green {
	color:#0caf78
}
.opp-grid p, .opp-total p {
	margin:0;
	line-height:1
}
.opp-grid b {
	display:block;
	font-size:25px;
	color:var(--navy)
}
.opp-grid small {
	display:block;
	font-size:9px;
	color:#5f6d80;
	margin-top:5px
}
.opp-total {
	display:flex;
	align-items:center;
	gap:14px;
	padding:12px 17px;
	background:linear-gradient(135deg, #0d63da, #08499f);
	color:#fff;
	border-radius:9px
}
.opp-total i {
	font-style:normal;
	font-size:31px
}
.opp-total b {
	display:block;
	font-size:27px
}
.opp-total small {
	font-size:10px
}
.agent-card {
	position:absolute;
	right:20%;
	top:360px;
	width:570px;
	padding:18px
}
.agent-profile {
	display:grid;
	grid-template-columns:auto 1fr auto;
	gap:12px;
	align-items:center
}
.avatar {
	width:54px;
	height:54px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:#d9eaff;
	color:#0b5fcf;
	font-weight:900
}
.agent-profile p {
	margin:0
}
.agent-profile b {
	display:block;
	color:var(--navy);
	font-size:14px
}
.agent-profile small {
	font-size:9px;
	color:#64748b
}
.agent-profile em {
	font-style:normal;
	background:#2dbb6b;
	color:#fff;
	padding:6px 14px;
	border-radius:18px;
	font-size:9px
}
.agent-metrics {
	display:grid;
grid-template-columns:1.4fr repeat(3, .65fr);
	margin:15px 0;
	border-block:1px solid #e4eaf2
}
.agent-metrics p {
	margin:0;
	padding:11px;
	border-right:1px solid #e4eaf2
}
.agent-metrics p:last-child {
	border:0
}
.agent-metrics small {
	display:block;
	font-size:8px;
	color:#6a7789
}
.agent-metrics b {
	font-size:20px;
	color:var(--navy)
}
.agent-event {
	display:flex;
	justify-content:space-between;
	align-items:center
}
.agent-event p {
	margin:0
}
.agent-event b {
	display:block;
	font-size:11px
}
.agent-event small {
	font-size:9px;
	color:#6b7889
}
.agent-event button {
	border:1px solid var(--blue);
	background:#fff;
	color:var(--blue);
	border-radius:6px;
	padding:11px 15px;
	font-size:9px;
	text-transform:uppercase;
	font-weight:900
}
.section {
	padding:105px 0
}
.prospect-heading {
	display:grid;
	grid-template-columns:1fr auto;
	align-items:end;
	gap:60px;
	margin-bottom:48px
}
.prospect h2, .controls h2, .final-cta h2 {
	font-size:clamp(46px, 3.3vw, 62px);
	line-height:1;
	letter-spacing:-.045em;
	color:var(--navy);
	margin:0 0 18px
}
.prospect-heading p {
	font-size:16px;
	line-height:1.55;
	margin:0 0 8px
}
.script {
	font-family:"Segoe Print", "Bradley Hand", cursive;
	color:#0d4a9e;
	font-size:31px;
	line-height:1.3;
	transform:rotate(-5deg);
	padding:0 35px 8px 0
}
.activity-cards {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:24px
}
.activity-cards article {
	border:1px solid #dfe6ef;
	border-radius:15px;
	background:#fff;
	overflow:hidden;
	box-shadow:0 10px 28px rgba(18, 46, 80, .06); position: relative;
}
.photo {
	height:250px;
	position:relative;
}
.photo img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block
}
.photo span {
	position:absolute;
	left:22px;
	bottom:-24px;
	width:58px;
	height:58px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:linear-gradient(135deg, #1694ff, #0065e8);
	color:#fff;
	font-size:24px
}
.card-copy {
	padding:38px 25px;
}
.card-copy h3 {
	text-transform:uppercase;
	color:#073e91;
	font-size:15px;
	margin:0 0 8px
}
.card-copy h4 {
	font-size:22px;
	line-height:1.08;
	color:var(--navy);
	margin:0 0 12px
}
.card-copy p {
	font-size:14px;
	line-height:1.5;
	color:#59677a;
	margin:0 0 17px
}
.card-copy a {
	text-transform:uppercase;
	font-size:11px;
	font-weight:900;
	color:var(--blue); position: absolute; bottom: 20px;
}
.workflow {
	padding:92px 0;
	background:#f4f9fd;
}
.workflow-grid {
	display:grid;
	grid-template-columns:350px 1fr;
	gap:60px;
	align-items:center
}
.workflow-copy h2 {
	font-size:42px;
	line-height:1.02;
	letter-spacing:-.04em;
	color:var(--navy);
	margin:0 0 17px
}
.workflow-copy p {
	font-size:15px;
	line-height:1.5
}
.steps {
	display:grid;
	grid-template-columns:repeat(13, auto);
	align-items:start;
	justify-content:space-between;
	gap:8px
}
.step {
	text-align:center;
	width:115px; position: relative;
}
.step small {
	display:grid;
	place-items:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#d3e8ff;
	color:var(--blue);
	font-size:11px;
	font-weight:900;
	margin:0; position: absolute; top: -10px; left: 10px;
}
.step i {
	display:grid;
	place-items:center;
	width:80px;
	height:80px;
	border-radius:50%;
	background:#e6f3ff;
	color:#073475;
	font-style:normal;
	font-size:30px;
	margin:0 auto 12px;
	box-shadow:0 8px 20px rgba(44, 121, 194, .08)
}
.step b {
	display:block;
	text-transform:uppercase;
	color:#092d67;
	font-size:11px;
	line-height:1.15;
	min-height:28px
}
.step span {
	display:block;
	font-size:10px;
	line-height:1.35;
	color:#637086;
	margin-top:9px
}
.steps em {
	font-style:normal;
	color:#0b55ba;
	font-size:23px;
	padding-top:74px
}
.ai-section {
	padding:90px 0;
	background:radial-gradient(circle at 50% 50%, #0c417a 0, #082d59 45%, #061b3b 100%);
	color:#fff
}
.ai-grid {
	display:grid;
grid-template-columns:1fr 1.1fr .8fr;
	gap:45px;
	align-items:center
}
.ai-copy h2 {
	font-size:44px;
	line-height:1.03;
	letter-spacing:-.04em;
	margin:0 0 18px
}
.ai-copy h2 span {
	color:#50c7ff
}
.ai-copy p {
	font-size:15px;
	line-height:1.55;
	color:#dbe6f4
}
.conversation {
	background:#fff;
	color:var(--ink);
	padding:20px;
	border-radius:14px;
	box-shadow:0 16px 38px rgba(0, 0, 0, .2)
}
.chat {
	display:grid;
	grid-template-columns:40px 1fr;
	gap:10px;
	margin:10px 0
}
.chat>i {
	width:36px;
	height:36px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:#0d56b5;
	color:#fff;
	font-style:normal;
	font-size:10px;
	font-weight:900
}
.chat>i.person {
	background:#d7a17c
}
.chat>div {
	position:relative;
	background:#eaf3ff;
	border-radius:8px;
	padding:10px 62px 10px 12px
}
.chat>div.gray {
	background:#f0f2f5
}
.chat b {
	font-size:10px
}
.chat p {
	font-size:10px;
	line-height:1.38;
	margin:4px 0
}
.chat small {
	position:absolute;
	right:9px;
	bottom:8px;
	color:#6c7889;
	font-size:8px
}
.intent-panel {
	border:1px solid #2e5f92;
	background:rgba(2, 27, 57, .45);
	border-radius:13px;
	padding:18px
}
.intent-panel p {
	display:flex;
	justify-content:space-between;
	gap:14px;
	border-bottom:1px solid rgba(255, 255, 255, .12);
	padding:8px 0;
	margin:0;
	font-size:11px
}
.intent-panel span {
	color:#c1d1e4
}
.intent-panel blockquote {
	text-align:center;
	font-size:13px;
	line-height:1.4;
	margin:21px 0 0
}
.results {
	padding:78px 0
}
.results-grid {
	display:grid;
grid-template-columns:1.35fr .6fr .7fr 1fr;
	gap:38px;
	align-items:center
}
.results-copy h2 {
	font-size:38px;
	letter-spacing:-.035em;
	color:var(--navy);
	margin:0 0 12px
}
.results-copy p {
	font-size:13px;
	line-height:1.5;
	margin:0 0 8px
}
.result-number {
	display:flex;
	align-items:center;
	gap:15px
}
.result-number i {
	width:58px;
	height:58px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:#e4f1ff;
	color:var(--blue);
	font-style:normal;
	font-size:24px
}
.result-number p {
	margin:0
}
.result-number b {
	display:block;
	color:#0a4eaa;
	font-size:31px
}
.result-number span {
	font-size:10px;
	line-height:1.25
}
.testimonial {
	margin:0;
	background:#fff;
	border:1px solid #dce5f0;
	border-radius:11px;
	padding:25px;
	box-shadow:0 10px 28px rgba(18, 53, 91, .08);
	font-size:12px;
	font-style:italic;
	line-height:1.5
}
.testimonial .testi-foot {
	font-style:normal;
	font-weight:700;
	margin-top:12px; color: var(--navy);
}
.testimonial small {
	display:block;
	font-weight:500
}
.controls {
	padding:95px 0;
	background:#f8fbff
}
.control-cards {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:22px;
	margin-top:35px
}
.control-cards>div {
	background:#fff;
	border:1px solid #dfe7f0;
	border-radius:13px;
	padding:27px
}
.control-cards i {
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	border-radius:50%;
	background:#e7f2ff;
	color:var(--blue);
	font-style:normal;
	font-weight:900;
	margin-bottom:16px
}
.control-cards b {
	color:var(--navy);
	font-size:15px
}
.control-cards p {
	font-size:13px;
	line-height:1.45;
	color:#637087;
	margin:9px 0 0
}
.fine {
	font-size:10px;
	color:#7a8798;
	margin:22px 0 0
}
.final-cta {
	position:relative;
	overflow:hidden;
	padding:76px 0;
	color:#fff;
	background:#061d3d
}
.final-image {
	position:absolute;
	inset:0;
	background-image:linear-gradient(90deg, rgba(4, 25, 57, .96), rgba(5, 42, 80, .63)), url("images/cta-neighborhood.jpg");
	background-size:cover;
	background-position:center 60%
}
.final-grid {
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:1.2fr 1fr;
	gap:60px;
	align-items:end
}
.light {
	color:#c5deff
}
.final-cta h2 {
	color:#fff;
	font-size:44px;
	margin-bottom:9px
}
.final-cta>div p {
	font-size:15px
}
.trust {
	display:flex;
	justify-content:flex-end;
	gap:36px
}
.trust>div {
	display:flex;
	align-items:center;
	gap:11px;
	font-size:11px
}
.trust i {
	width:50px;
	height:50px;
	border:1px solid #fff;
	border-radius:50%;
	display:grid;
	place-items:center;
	font-style:normal;
	font-size:20px
}
footer {
	background:#04132d;
	color:#b8c5d7;
	padding:31px 0
}
.footer-inner {
	display:flex;
	justify-content:space-between;
	align-items:center
}
.footer-inner nav{
	display: flex;
    gap: 22px;
    font-size: 12px;
    font-weight: 600;}

.footer-inner nav a:hover{color: #ffffff;}
.inverse {
	color:#fff
}
.footer-inner p {
	font-size:10px;
	margin:0
}
@media(max-width:1450px) {
.header-inner nav {
gap:14px
}
.header-inner nav>a:not(.btn) {
display:none
}
.hero-grid {
grid-template-columns:1fr 1fr
}
.hero h1 {
font-size:60px
}
.opportunities {
width:430px
}
.agent-card {
width:500px
}
.photo {
height:215px
}
.workflow-grid {
grid-template-columns:300px 1fr
}
.step {
width:95px
}
.results-grid {
grid-template-columns:1.3fr .65fr .75fr
}
.testimonial {
grid-column:1/-1
}
}

@media(max-width:1300px){
	.workflow-grid {
	grid-template-columns:1fr
	}
}
@media(max-width:1050px) {
.menu {
display:block; padding: 0;
}
.header-inner nav {
display:none;
position:absolute;
top:82px;
left:0;
right:0;
background:#fff;
padding:22px 30px;
box-shadow:0 18px 35px rgba(12, 31, 56, .12);
flex-direction:column;
align-items:stretch
}
.header-inner nav.open {
display:flex
}
.header-inner nav>a:not(.btn) {
display:block
}
.hero {
min-height:auto
}
.hero-image {
width:100%;
height:430px;
background-image:linear-gradient(180deg, rgba(255, 255, 255, 0), #f7fbff 98%), url("images/hero-photo.jpg");
background-position:center 15%
}
.hero-grid {
grid-template-columns:1fr;
padding:50px 0;
min-height:auto
}
.hero-dashboard {
height:577px;
max-width:650px;
width:100%;
margin:auto
}
.opportunities {
right:0;
width:490px
}
.agent-card {
right:55px;
width:560px
}
.prospect-heading {
grid-template-columns:1fr
}
.script {
display:none
}
.activity-cards {
grid-template-columns:1fr 1fr
}
.photo {
height:250px
}

.steps {
grid-template-columns:repeat(7, 1fr);
gap:22px
}
.steps em {
display:none
}
.step {
width:auto
}
.ai-grid {
grid-template-columns:1fr 1fr
}
.intent-panel {
grid-column:1/-1
}
.results-grid {
grid-template-columns:1fr 1fr
}
.results-copy, .testimonial {
grid-column:1/-1
}
.control-cards {
grid-template-columns:1fr 1fr
}
.final-grid {
grid-template-columns:1fr
}
.trust {
justify-content:flex-start
}
.step i{
	width: 60px;
    height: 60px;
}
.step b{
	font-size: 10px;
}
.step small{
	top: -20px;
}
.hero{background: linear-gradient(90deg, rgba(245, 250, 254, .90) 8%, rgba(245, 250, 254, .70) 40%, rgba(245, 250, 254, 0) 90%), url(images/hero-banner.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;}
.section,
.workflow,
.ai-section,
.results,
.controls,
.final-cta{padding: 50px 0;}

}
@media(max-width:650px) {
.container {
width:calc(100% - 30px)
}
.site-header {
height:68px
}
.header-inner {
width:calc(100% - 30px)
}
.brand>span {
font-size:20px
}
.brand small {
font-size:8px
}
.header-inner nav {
top:68px
}
.hero-image {
height:300px
}
.hero h1 {
font-size:40px
}
.hero-lead {
font-size:17px
}
.hero-body {
font-size:14px
}
.actions .btn {
width:100%
}
.value-row {
display:grid;
grid-template-columns:1fr 1fr;
gap:15px
}
.value-row>div {
border:0;
padding:0
}
.hero-dashboard {
height:auto
}
.opportunities, .agent-card {
position:relative;
right:auto;
top:auto;
width:100%
}
.agent-card {
margin-top:15px
}
.agent-metrics {
grid-template-columns:1fr 1fr
}

.prospect h2, .controls h2 {
font-size:38px
}
.activity-cards {
grid-template-columns:1fr
}
.photo {
height:240px
}
.card-copy p {
min-height:0
}

.workflow-copy h2 {
font-size:38px
}
.steps {
grid-template-columns:1fr 1fr; gap:40px;
}

.ai-grid, .results-grid, .control-cards {
grid-template-columns:1fr
}
.intent-panel, .results-copy, .testimonial {
grid-column:auto
}
.ai-copy h2 {
font-size:38px
}
.final-cta h2 {
font-size:32px
}
.trust {
display:grid;
grid-template-columns:1fr 1fr
}

.step small{left: 0; right: 0; margin: 0 auto;}

}


.legal-hero {
    background: radial-gradient(circle at 82% 20%, rgba(8, 114, 250, .16), transparent 30%), linear-gradient(135deg, #f7fbff, #fff);
    border-bottom: 1px solid var(--line);
}

.hero-inner {
    width: calc(100% - clamp(48px, 6vw, 120px));
    margin: auto;
    padding: 78px 0 62px;
}


.eyebrow {
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 11px;
    font-weight: 900;
    color: #41638f;
}

h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--navy);
    margin: 12px 0 18px;
}

.hero-inner p {
    max-width: 820px;
    font-size: 17px;
    color: #4d5d72;
}

.meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 24px;
    font-size: 12px;
    color: #68778a;
}

.layout {
    width: calc(100% - clamp(48px, 6vw, 120px));
    margin: auto;
    padding: 54px 0 90px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 55px;
}

.toc {
    position: sticky;
    top: 100px;
    align-self: start;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(18, 46, 80, .05);
}

.toc b {
    display: block;
    color: var(--navy);
    font-size: 13px;
    margin-bottom: 10px;
}

.toc a {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    color: #526278;
}

.document h2 {
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--navy);
    margin: 52px 0 14px;
    padding-top: 8px;
}

.document h2:first-child {
    margin-top: 0;
}

.document h3 {
    font-size: 18px;
    color: #123a78;
    margin: 28px 0 8px;
}

.document p,
.document li {
    font-size: 14px;
    color: #344257;
}

.document li {
    margin: 7px 0;
}

.callout {
    background: #f1f7ff;
    border: 1px solid #cfe2fb;
    border-left: 5px solid var(--blue);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 22px 0;
}

.warning {
    background: #fff8e8;
    border-color: #efcf7a;
    border-left-color: #d89b00;
}

.caps {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px !important;
}

.placeholder {
    background: #fff0f0;
    color: #9b1c1c;
    border: 1px solid #f4b7b7;
    border-radius: 5px;
    padding: 1px 5px;
    font-weight: 800;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 18px 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    text-align: left;
    vertical-align: top;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}

th {
    background: #f7faff;
    color: var(--navy);
}

.crosslinks {
    width: calc(100% - clamp(48px, 6vw, 120px));
    margin: 0 auto 70px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.crosslinks a {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    color: var(--navy);
    font-weight: 850;
}


@media (max-width: 900px) {

    .layout {
        grid-template-columns: 1fr;
    }

    .toc {
        position: relative;
        top: auto;
    }

    .crosslinks {
        grid-template-columns: 1fr 1fr;
    }

    .footer-inner {
		flex-direction:column;
		align-items:flex-start;
		gap:18px
	}
	.hero-inner{padding: 50px 0;}
	.layout{padding: 50px 0; gap:40px;}
	.crosslinks{margin: 0 auto 50px}
	.document h2{margin: 32px 0 14px; font-size: 24px;}
}

@media (max-width: 650px) {
    .hero-inner,
    .layout,
    .crosslinks {
        width: calc(100% - 30px);
    }

    .crosslinks {
        grid-template-columns: 1fr;
    }

}