:root{
--lg-bg: #f7fbfd;
--lg-card: #ffffff;
--lg-card-alt: #eef7fb;
--lg-text: #1f2d36;
--lg-muted: #5f7480;
--lg-line: #d8e6ee;
--lg-primary: #0b6b8f;
--lg-primary-dark: #08536e;
--lg-accent: #11a0d4;
--lg-success: #0f8a5f;
--lg-shadow: 0 14px 40px rgba(15, 32, 45, .08);
--lg-radius: 22px;
}
html{
scroll-behavior:smooth;
}
.lg-container{
width:min(1180px, calc(100% - 32px));
margin:0 auto;
}
.lg-pillar-hero,
.lg-section{
padding: 76px 0;
}
.lg-section-alt{
background: linear-gradient(180deg, #f8fcfe 0%, #eef7fb 100%);
}
.lg-section-cta{
background: linear-gradient(135deg, #0b6b8f 0%, #083f55 100%);
color:#fff;
}
.lg-hero-grid,
.lg-contact-grid{
display:grid;
grid-template-columns: 1.08fr .92fr;
gap: 28px;
align-items:center;
}
.lg-kicker,
.lg-section-eyebrow{
display:inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--lg-accent);
margin-bottom: 14px;
}
.lg-pillar-hero h1{
font-size: clamp(34px, 4vw, 56px);
line-height: 1.05;
margin: 0 0 18px;
color: var(--lg-text);
}
.lg-section h2{
font-size: clamp(28px, 3vw, 42px);
line-height: 1.1;
margin: 0 0 14px;
color: var(--lg-text);
}
.lg-lead,
.lg-section-heading p,
.lg-type-card p,
.lg-step p,
.lg-info-card p,
.lg-help-box p,
.lg-contact-box p,
.lg-cta-panel p{
color: var(--lg-muted);
font-size: 16px;
line-height: 1.75;
margin: 0;
}
.lg-hero-copy{
padding: 8px 0;
}
.lg-hero-cta{
display:flex;
flex-wrap:wrap;
gap: 12px;
margin-top: 28px;
}
.lg-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
padding: 14px 20px;
border-radius: 999px;
text-decoration:none;
font-weight: 700;
transition: .25s ease;
border: 1px solid transparent;
line-height: 1;
white-space: nowrap;
}
.lg-btn:hover{
transform: translateY(-2px);
box-shadow: var(--lg-shadow);
}
.lg-btn-primary{
background: var(--lg-primary);
color: #fff;
}
.lg-btn-primary:hover{
background: var(--lg-primary-dark);
}
.lg-btn-secondary{
background: #ffffff;
color: var(--lg-primary);
border-color: rgba(11,107,143,.22);
}
.lg-btn-ghost{
background: transparent;
color: var(--lg-primary);
border-color: rgba(11,107,143,.2);
}
.lg-btn-small{
padding: 11px 16px;
font-size: 14px;
}
.lg-mini-tags{
display:flex;
flex-wrap:wrap;
gap: 10px;
margin-top: 22px;
}
.lg-mini-tags span{
background: rgba(11,107,143,.08);
color: var(--lg-primary);
border: 1px solid rgba(11,107,143,.10);
padding: 8px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.lg-hero-visual{
display:flex;
justify-content:flex-end;
}
.lg-flow-card{
width:100%;
background: linear-gradient(180deg, #ffffff 0%, #f3fbfe 100%);
border:1px solid var(--lg-line);
border-radius: var(--lg-radius);
box-shadow: var(--lg-shadow);
padding: 18px;
}
.lg-flow-title{
font-size: 18px;
font-weight: 800;
margin-bottom: 14px;
color: var(--lg-text);
}
.lg-flow-card svg{
width:100%;
height:auto;
display:block;
}
.svg-label{
fill:#30444f;
font-size: 22px;
font-weight:700;
}
.lg-toc{
position: sticky;
top: 0;
z-index: 20;
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
border-top: 1px solid var(--lg-line);
border-bottom: 1px solid var(--lg-line);
}
.lg-toc .lg-container{
display:flex;
flex-wrap:wrap;
gap: 10px;
padding: 12px 0;
}
.lg-toc a{
text-decoration:none;
color: var(--lg-text);
background: #fff;
border: 1px solid var(--lg-line);
border-radius: 999px;
padding: 9px 14px;
font-size: 14px;
font-weight: 600;
transition: .2s ease;
}
.lg-toc a:hover{
color: var(--lg-primary);
border-color: rgba(11,107,143,.32);
box-shadow: 0 8px 20px rgba(15,32,45,.06);
}
.lg-section-heading{
max-width: 860px;
margin-bottom: 28px;
}
.lg-types-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.lg-type-card,
.lg-info-card,
.lg-step,
.lg-contact-box,
.lg-help-box,
.lg-cta-panel{
background: var(--lg-card);
border:1px solid var(--lg-line);
border-radius: var(--lg-radius);
box-shadow: var(--lg-shadow);
}
.lg-type-card{
padding: 24px;
display:flex;
flex-direction:column;
gap: 14px;
}
.lg-type-card h3,
.lg-info-card h3,
.lg-step h3,
.lg-contact-box h2,
.lg-help-box h3,
.lg-cta-panel h2{
margin:0;
color: var(--lg-text);
line-height: 1.2;
}
.lg-type-card h3{
font-size: 22px;
}
.lg-inline-cta{
margin-top: 24px;
display:flex;
flex-wrap:wrap;
gap: 12px;
}
.lg-table-wrap{
overflow-x:auto;
background:#fff;
border:1px solid var(--lg-line);
border-radius: var(--lg-radius);
box-shadow: var(--lg-shadow);
}
.lg-table{
width:100%;
border-collapse: collapse;
min-width: 980px;
}
.lg-table th,
.lg-table td{
padding: 16px 14px;
border-bottom: 1px solid var(--lg-line);
vertical-align: top;
text-align:left;
font-size: 15px;
line-height: 1.65;
}
.lg-table th{
background: #f3fbfe;
color: var(--lg-text);
font-weight: 800;
}
.lg-table td{
color: var(--lg-muted);
}
.lg-steps-grid,
.lg-standards-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.lg-step{
padding: 22px;
}
.lg-step-num{
width: 44px;
height: 44px;
border-radius: 50%;
display:grid;
place-items:center;
background: rgba(11,107,143,.10);
color: var(--lg-primary);
font-weight: 800;
margin-bottom: 14px;
}
.lg-info-card{
padding: 22px;
}
.lg-wide-card{
grid-column: span 3;
}
.lg-help-box{
margin-top: 22px;
padding: 24px;
background: linear-gradient(180deg, #ffffff 0%, #f3fbfe 100%);
}
.lg-faq-list{
display:grid;
gap: 12px;
}
.lg-faq-item{
background:#fff;
border:1px solid var(--lg-line);
border-radius: 18px;
overflow:hidden;
box-shadow: var(--lg-shadow);
}
.lg-faq-item summary{
cursor:pointer;
padding: 18px 20px;
font-weight: 700;
color: var(--lg-text);
list-style:none;
}
.lg-faq-item summary::-webkit-details-marker{
display:none;
}
.lg-faq-item div{
padding: 0 20px 18px;
color: var(--lg-muted);
line-height: 1.75;
}
.lg-cta-panel{
padding: 30px;
background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
border-color: rgba(255,255,255,.22);
}
.lg-section-cta h2,
.lg-section-cta p,
.lg-section-cta a{
color:#fff;
}
.lg-contact-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg-contact-box{
padding: 26px;
background: #fff;
}
.lg-check-list{
margin: 16px 0 0;
padding: 0;
list-style: none;
display:grid;
gap: 10px;
}
.lg-check-list li{
position:relative;
padding-left: 26px;
color: var(--lg-text);
font-weight: 600;
}
.lg-check-list li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color: var(--lg-success);
font-weight: 800;
}
@media (max-width: 1024px){
.lg-hero-grid,
.lg-contact-grid,
.lg-steps-grid,
.lg-standards-grid,
.lg-types-grid{
grid-template-columns: 1fr;
}
.lg-wide-card{
grid-column: auto;
}
.lg-toc{
position: static;
}
}
@media (max-width: 640px){
.lg-pillar-hero,
.lg-section{
padding: 56px 0;
}
.lg-hero-cta,
.lg-inline-cta{
flex-direction: column;
align-items: stretch;
}
.lg-btn{
width: 100%;
}
.lg-table th,
.lg-table td{
padding: 13px 12px;
font-size: 14px;
}
}