*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:20px}
body{
margin:0;
background:#fff;
color:#0b1932;
font-family:Arial,Helvetica,sans-serif;
line-height:1.6}
a{
color:inherit;
text-underline-offset:4px}
a:hover{
color:#1543ff}
button,a,summary{
touch-action:manipulation}
a:focus-visible,summary:focus-visible{
outline:3px solid #1543ff;
outline-offset:5px}
.co-skip{
position:fixed;
top:8px;
left:8px;
transform:translateY(-160%);
background:#fff;
padding:12px;
z-index:20}
.co-skip:focus{
transform:none}
.co-header{
padding:20px max(20px,calc((100vw - 1200px)/2));
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
background:#0b1932;
color:#fff}
.co-brand{
display:flex;
flex-shrink:0}
.co-brand img{
width:140px;
height:46px;
object-fit:contain}
.co-header nav{
display:flex;
gap:24px;
align-items:center}
.co-header nav a{
font-size:14px;
text-decoration:none;
display:inline-flex;
align-items:center;
min-height:44px}
.co-header nav a:hover{
color:#a8c0ff}
main{
max-width:1200px;
margin:auto;
padding:0 28px}
.co-breadcrumb{
font-size:12px;
padding:24px 0;
color:#536580}
.co-hero{
padding:48px 0 60px;
max-width:940px}
.co-eyebrow{
font-size:11px;
letter-spacing:.2em;
font-weight:700;
margin:0 0 20px}
.co-hero h1,.co-product-hero h1{
font-size:clamp(36px,5.5vw,72px);
line-height:1.06;
letter-spacing:-.045em;
margin:0 0 24px;
font-weight:700;
overflow-wrap:anywhere}
h1 span{
color:#1543ff}
.co-lead{
font-size:19px;
max-width:650px;
color:#536580}
.co-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:28px}
.co-button{
background:#1543ff;
color:white;
border:1px solid #1543ff;
border-radius:10px;
padding:12px 18px;
min-height:48px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:12px;
font-size:14px;
font-weight:700;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease}
.co-button:hover{
color:white;
box-shadow:0 8px 20px #1543ff22;
transform:translateY(-2px)}
.co-outline{
background:white;
color:#1543ff;
border-color:#d2dbea}
.co-outline:hover{
color:#1543ff}
.co-notice{
border:1px solid #dae2ef;
border-left:3px solid #1543ff;
background:#f5f7fc;
border-radius:0 12px 12px 0;
padding:20px 24px;
font-size:14px}
.co-notice strong{
display:block}
.co-section{
padding:56px 0}
h2{
font-size:clamp(26px,3.5vw,42px);
letter-spacing:-.035em;
line-height:1.2;
margin:0 0 28px}
h3{
font-size:21px;
line-height:1.3;
margin:0 0 12px}
.co-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px}
.co-card{
border:1px solid #d5dfee;
border-radius:14px;
overflow:hidden;
display:flex;
flex-direction:column}
.co-image{
display:block;
position:relative;
overflow:hidden;
background:#f2f5fa}
.co-image img{
width:100%;
height:auto;
aspect-ratio:1.16;
object-fit:cover;
display:block;
transition:transform .3s ease}
.co-card:hover .co-image img{
transform:scale(1.035)}
.co-image span,.co-product-photo span{
position:absolute;
top:12px;
right:12px;
border-radius:20px;
background:#fffffff0;
font-size:10px;
padding:4px 9px}
.co-card-body{
padding:24px;
display:flex;
flex-direction:column;
flex:1}
.co-card h3 a{
text-decoration:none}
.co-card p{
font-size:14px;
margin:0 0 14px;
color:#536580}
.co-price{
font-size:23px;
letter-spacing:-.025em;
display:block}
.co-card .co-small,.co-small{
font-size:12px;
color:#536580}
.co-status{
margin-top:14px!important}
.co-card .co-button{
margin-top:auto}
.co-textlink{
display:inline-block;
color:#1543ff;
margin-top:24px;
font-weight:700}
.co-product-hero{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:64px;
align-items:center;
padding:30px 0 60px}
.co-product-photo{
position:relative;
overflow:hidden;
border-radius:18px}
.co-product-photo img{
width:100%;
height:auto;
display:block}
.co-formats{
display:grid;
gap:16px}
.co-format{
border:1px solid #d5dfee;
border-radius:14px;
padding:24px;
display:grid;
grid-template-columns:1fr auto auto;
gap:20px;
align-items:center}
.co-format p{
color:#536580;
font-size:13px;
margin:8px 0}
.co-document{
grid-column:1/-1;
border-top:1px solid #e4eaf4;
padding-top:14px}
.co-document a{
font-weight:700;
color:#1543ff}
.co-faq{
max-width:850px}
.co-faq details{
border-bottom:1px solid #d5dfee;
padding:18px 0}
.co-faq summary{
font-weight:700;
font-size:16px;
cursor:pointer;
min-height:44px;
display:flex;
align-items:center;
list-style:none;
gap:20px}
.co-faq summary:after{
content:'+';
margin-left:auto;
color:#1543ff}
.co-faq details[open] summary:after{
content:'−'}
.co-faq details p{
font-size:15px;
color:#536580}
.co-footer{
background:#0b1932;
color:white;
padding:40px max(28px,calc((100vw - 1144px)/2));
display:flex;
justify-content:space-between;
gap:30px;
font-size:13px}
.co-footer strong{
letter-spacing:.12em}
.co-footer a{
display:block;
min-height:32px}
.co-footer p{
color:#b8c6dc}
@media(max-width:800px){
.co-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.co-product-hero{
gap:28px}
.co-format{
grid-template-columns:1fr auto}
.co-format .co-button{
grid-column:1/-1}
}
@media(max-width:480px){
.co-header{
padding:12px 16px;
gap:12px}
.co-brand img{
width:105px;
height:35px}
.co-header nav{
gap:12px}
.co-header nav a{
font-size:11px}
main{
padding:0 18px}
.co-hero{
padding:26px 0 40px}
.co-lead{
font-size:17px}
.co-grid{
grid-template-columns:1fr}
.co-card-body{
padding:20px}
.co-notice{
padding:18px}
.co-section{
padding:40px 0}
.co-product-hero{
grid-template-columns:1fr;
padding-top:20px;
gap:28px}
.co-product-photo{
max-width:360px}
.co-format{
grid-template-columns:1fr;
padding:20px;
gap:14px}
.co-format .co-button,.co-document{
grid-column:1}
.co-footer{
flex-direction:column;
padding:28px 20px}
.co-actions .co-button{
width:100%}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
animation:none!important;
transition:none!important}
.co-button:hover,.co-card:hover .co-image img{
transform:none}
}