*{
box-sizing:border-box
}

:root{
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
color:#173b33;
background:#f5f7f6
}

body{
margin:0;
background:#f5f7f6
}

a{
color:inherit
}

.shell{
width:min(100% - 32px,1080px);
margin:auto;
padding:
calc(28px + env(safe-area-inset-top,0px))
0
calc(42px + env(safe-area-inset-bottom,0px))
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:32px
}

.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none
}

.brand img{
width:154px;
max-width:44vw;
height:auto
}

.home-link{
font-size:14px;
font-weight:700;
text-decoration:none;
color:#53655f
}

.hero{
padding:36px;
border:1px solid #dce8e4;
border-radius:28px;
background:#fff;
box-shadow:0 16px 48px rgba(15,43,35,.08)
}

.eyebrow{
margin:0 0 8px;
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:#657a72
}

h1{
margin:0;
font-size:clamp(30px,6vw,50px);
line-height:1.04;
letter-spacing:-.03em
}

.lead{
max-width:720px;
margin:16px 0 0;
font-size:17px;
line-height:1.6;
color:#657a72
}

.platforms{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
margin-top:22px
}

.platform{
display:flex;
flex-direction:column;
min-height:245px;
padding:26px;
border:1px solid #dce8e4;
border-radius:22px;
background:#fff
}

.platform h2{
margin:10px 0 8px;
font-size:24px
}

.platform p{
margin:0;
line-height:1.55;
color:#657a72
}

.badge{
display:inline-flex;
align-self:flex-start;
padding:6px 10px;
border-radius:999px;
background:#eef3df;
font-size:12px;
font-weight:800;
color:#4b5320
}

.action{
display:flex;
min-height:50px;
align-items:center;
justify-content:center;
margin-top:auto;
padding:0 18px;
border:0;
border-radius:14px;
background:#4b5320;
color:#fff;
font:inherit;
font-weight:800;
text-decoration:none;
cursor:pointer
}

.action.secondary{
background:#173b33
}

.note{
margin-top:18px;
padding:18px 20px;
border-radius:16px;
background:#eef3f1;
font-size:14px;
line-height:1.55;
color:#53655f
}

.steps{
display:grid;
gap:12px;
margin-top:22px
}

.step{
padding:17px 18px;
border:1px solid #dce8e4;
border-radius:16px;
background:#fff;
line-height:1.55
}

.footer{
margin-top:30px;
font-size:13px;
color:#73827d;
text-align:center
}

@media(max-width:720px){
.hero{
padding:26px 22px
}

.platforms{
grid-template-columns:1fr
}

.platform{
min-height:220px
}
}