.home-page .hero[data-hero-form="gradient-motion"]{
background-color:#2C3136;
background-image:linear-gradient(115deg,#2E6F8E 0%,#344B58 42%,#22262A 84%);
background-size:160% 160%;
color:#F3F5F6;
--mute-d:#C7D1D7;
--hair-d:rgba(243,245,246,.12);
animation:home-gradient 24s ease-in-out infinite alternate;
}
.home-page .hero-inner{
align-items:start;
grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
}
.home-page .hero-inner>div{
min-width:0;
}
.home-page .hero h1{
color:#F3F5F6;
line-height:1.15;
}
.home-page .hero h1 em{
font-style:normal;
color:#9FDCF0;
}
.home-page .hero .hero-lead{
color:#D3DCE1;
}
.home-page .hero .hero-facts{
margin-bottom:var(--space-3);
}
.home-page .hero .hero-facts div{
color:#D3DCE1;
}
.home-page .hero .hero-facts b{
color:#F3F5F6;
}
.home-page .hero .kicker{
background:#39464E;
color:#E0E7EC;
}
.home-page .hero .hero-art{
text-align:left;
}
.home-page .hero .queue-card{
background:#F1EEE7;
color:#22262A;
--mute-l:#555B60;
--hair-l:rgba(34,38,42,.14);
}
.home-page .hero .queue-card .float-title,
.home-page .hero .queue-card .build-row,
.home-page .hero .queue-card .runner-line{
color:#22262A;
}
.home-page .hero .queue-card .node-label{
color:#555B60;
}
.home-page .hero .queue-card .runner-line.cut{
color:#555B60;
}
.home-page .hero .queue-card .runner-line.done{
color:#1F5C78;
}
.home-page .hero .runner-card{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.home-page .hero .runner-card .runner-line{
color:#D3DCE1;
}
.home-page .hero .runner-card strong,
.home-page .hero .runner-card .status-live{
color:#9FDCF0;
}
.home-page .hero .float-card{
background:#ECEAF1;
color:#22262A;
--mute-l:#55535E;
--hair-l:rgba(34,38,42,.14);
}
.home-page .hero .float-card p{
color:#22262A;
}
.home-page .hero .float-card .node-label{
color:#55535E;
}
.home-page .hero .pill-ok{
background:#22262A;
color:#F3F5F6;
}
@media(max-width:42rem){
.home-page:lang(ja) .hero .pill-ok{
display:inline-flex;
max-width:100%;
padding:.4em .8em;
border-radius:var(--r-p);
}
}
.home-page .deco i:nth-child(1){left:7%;top:18%}
.home-page .deco i:nth-child(2){left:41%;top:12%;animation-delay:1.2s}
.home-page .deco i:nth-child(3){left:36%;top:78%;animation-delay:2.4s;width:4px;height:4px}
.home-page .deco i:nth-child(4){left:3%;top:62%;animation-delay:.6s;width:4px;height:4px}
.home-page .deco i:nth-child(5){left:52%;top:46%;animation-delay:3s}
.home-page .deco i:nth-child(6){left:94%;top:86%;animation-delay:1.8s;width:4px;height:4px}
.home-page .deco s:nth-child(7){left:22%;top:9%}
.home-page .deco s:nth-child(8){left:5%;top:40%;animation-delay:1s}
.home-page .deco s:nth-child(9){left:45%;top:88%;animation-delay:2s}
.home-page .deco s:nth-child(10){left:30%;top:66%;animation-delay:3s}
.home-page .deco s:nth-child(11){left:55%;top:20%;animation-delay:.5s}
.home-page .deco{
pointer-events:none;
}
.home-overnight{
position:relative;
margin-block:var(--space-3);
min-width:0;
}
.home-chart-event{
color:#555B60;
font-size:var(--text-xs);
line-height:var(--leading-small);
}
.home-chart-labels{
position:absolute;
inset:21% auto auto 0;
width:21%;
display:grid;
gap:var(--space-2);
font-size:var(--text-xs);
line-height:1.3;
}
.home-chart-labels b{
font-size:inherit;
overflow-wrap:break-word;
}
.home-chart-labels b+b{
color:#1F5C78;
}
.home-page .home-overnight .overnight-chart{
width:100%;
height:auto;
margin:0;
}
.home-page .home-scene-note{
margin-top:var(--space-2);
font-size:var(--text-xs);
line-height:var(--leading-small);
color:#555B60;
}
.hero-band{
background:#FFFFFF;
color:#22262A;
--mute-l:#555B60;
--hair-l:rgba(34,38,42,.14);
}
.hero-band .wrap{
display:flex;
align-items:center;
gap:var(--space-4);
min-height:100px;
padding-block:var(--space-3);
}
.hero-band .link{
color:#22262A;
}
.band-note{
margin-left:auto;
display:flex;
align-items:center;
gap:12px;
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#555B60;
min-width:0;
}
.band-note b{
font-family:var(--f-mono);
color:#2E6F8E;
font-weight:600;
}
.pair{
background:#FBFBFA;
color:#22262A;
--mute-l:#555B60;
--hair-l:rgba(34,38,42,.14);
padding:var(--space-5) 0 var(--space-6);
}
.pair-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-3);
align-items:stretch;
}
.pair-fig{
border-radius:var(--r-m);
overflow:hidden;
min-width:0;
display:flex;
flex-direction:column;
}
.pair-fig .stage{
height:440px;
display:flex;
align-items:center;
justify-content:center;
padding-inline:var(--space-3);
}
.pair-fig .hardware-diagram{
width:420px;
height:auto;
}
.pair-fig .desktop-diagram{
width:480px;
height:auto;
}
.pair-fig figcaption{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:var(--space-2);
padding:var(--space-3);
margin-top:auto;
}
.pair-fig figcaption b{
font-family:var(--f-head);
font-size:var(--text-lg);
line-height:1.25;
font-weight:800;
}
.pair-fig figcaption span{
font-size:var(--text-sm);
line-height:var(--leading-small);
}
.fig-a{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.fig-a figcaption span{
color:#B5BEC4;
}
.fig-b{
background:#ECEAF1;
color:#22262A;
--mute-l:#55535E;
--hair-l:rgba(34,38,42,.14);
}
.fig-b figcaption span{
color:#55535E;
}
.home-hardware{
position:relative;
width:min(100%,420px);
}
.home-hardware-top,
.home-hardware-front,
.home-hardware-chip,
.home-hardware-led{
position:absolute;
font-size:var(--text-xs);
line-height:var(--leading-small);
}
.home-hardware-top{
left:14.3%;
top:2%;
color:#B5BEC4;
font-family:var(--f-mono);
}
.home-hardware-front{
left:14.3%;
top:74%;
color:#B5BEC4;
font-family:var(--f-mono);
}
.home-hardware-chip,
.home-hardware-led{
left:74%;
right:0;
display:grid;
gap:var(--space-1);
}
.home-hardware-chip{top:22%}
.home-hardware-led{top:49%}
.home-hardware-chip b,
.home-hardware-led b{
color:#F3F5F6;
}
.home-hardware-chip span{
color:#B5BEC4;
}
.home-hardware-led span{
color:#9FDCF0;
}
.home-desktop{
position:relative;
width:min(100%,480px);
}
.home-desktop-menu,
.home-desktop-upload,
.home-desktop-client{
position:absolute;
font-size:clamp(.4rem,.75vw,.5rem);
line-height:1.2;
}
.home-desktop-menu{
left:16%;
top:13.5%;
color:#22262A;
max-width:66%;
}
.home-desktop-upload{
left:25%;
top:50.5%;
color:#FFFFFF;
font-weight:700;
}
.home-desktop-client{
left:20%;
top:74.5%;
color:#22262A;
font-weight:700;
}
.sla{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.sla-grid{
display:grid;
grid-template-columns:minmax(0,5fr) minmax(0,6fr);
gap:var(--space-5);
align-items:start;
}
.sla-num{
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
border-radius:var(--r-m);
padding:var(--space-4);
min-width:0;
container-type:inline-size;
}
.sla-num .big{
font-family:var(--f-head);
font-weight:800;
font-size:min(6rem,25cqi);
line-height:1.15;
color:#6FC3DF;
letter-spacing:-.03em;
font-variant-numeric:tabular-nums;
}
.sla-num .cap{
margin-top:var(--space-2);
font-size:var(--text-base);
line-height:var(--leading-body);
color:#F3F5F6;
font-weight:700;
}
.sla-num .calc{
margin-top:var(--space-3);
padding-top:var(--space-3);
border-top:1px solid rgba(243,245,246,.12);
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#B5BEC4;
}
.sla-num .calc b{
display:block;
font-size:var(--text-lg);
line-height:1.3;
color:#F3F5F6;
font-weight:600;
margin-bottom:var(--space-1);
}
.kv{
display:grid;
min-width:0;
}
.kv>div{
display:grid;
grid-template-columns:9rem minmax(0,1fr);
gap:var(--space-3);
padding:var(--space-3) 0;
border-top:1px solid rgba(243,245,246,.12);
}
.kv>div:last-child{
border-bottom:1px solid rgba(243,245,246,.12);
}
.kv dt{
font-family:var(--f-mono);
font-size:var(--text-xs);
line-height:var(--leading-small);
letter-spacing:.06em;
color:#B5BEC4;
min-width:0;
overflow-wrap:break-word;
}
.kv dd{
font-size:var(--text-base);
line-height:var(--leading-body);
color:#F3F5F6;
min-width:0;
overflow-wrap:break-word;
}
.kv dd small{
display:block;
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#B5BEC4;
margin-top:var(--space-1);
}
.solo{
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.solo-split{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
border-radius:var(--r-m);
overflow:hidden;
align-items:stretch;
}
.win-white{
background:#FFFFFF;
color:#22262A;
--mute-l:#555B60;
--hair-l:rgba(34,38,42,.14);
padding:var(--space-5) var(--space-4);
min-width:0;
}
.win-white p{
color:#555B60;
margin-top:var(--space-1);
}
.win-dark{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
padding:var(--space-5) var(--space-4);
min-width:0;
}
.win-dark p{
color:#B5BEC4;
margin-top:var(--space-1);
}
.owner{
margin-top:var(--space-4);
display:grid;
gap:var(--space-2);
}
.owner div{
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--space-2);
padding:var(--space-3);
border-radius:var(--r-s);
background:#F1EEE7;
color:#22262A;
font-size:var(--text-sm);
line-height:var(--leading-small);
min-width:0;
}
.owner div .mono{
font-size:var(--text-xs);
color:#555B60;
}
.owner div.you{
background:#22262A;
color:#F3F5F6;
}
.owner div.you .mono{
color:#9FDCF0;
}
.alloc{
margin-top:var(--space-4);
display:grid;
gap:var(--space-3);
}
.alloc-row{
display:grid;
grid-template-columns:minmax(7.5rem,1fr) minmax(0,1fr) auto;
gap:var(--space-2);
align-items:center;
font-size:var(--text-sm);
line-height:var(--leading-small);
}
.alloc-row>*{
min-width:0;
}
.alloc-row .bar{
height:10px;
border-radius:var(--r-p);
background:linear-gradient(90deg,#2E6F8E,#6FC3DF);
color:#22262A;
}
.alloc-row .mono{
font-size:var(--text-xs);
color:#9FDCF0;
text-align:right;
}
.trade{
margin-top:var(--space-3);
display:flex;
gap:var(--space-3);
align-items:center;
padding:var(--space-3);
border-radius:var(--r-m);
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
font-size:var(--text-sm);
line-height:var(--leading-body);
}
.trade b{
font-family:var(--f-mono);
font-size:var(--text-xs);
letter-spacing:.08em;
color:#B5BEC4;
flex:none;
}
.nodes{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.city-list{
display:grid;
gap:var(--space-2);
align-items:stretch;
}
.city{
display:grid;
grid-template-columns:3.25rem minmax(0,1fr) auto;
grid-template-areas:"code name sale" "code hint sale";
column-gap:1rem;
row-gap:.2rem;
align-items:center;
padding:var(--space-3) 32px;
border-radius:var(--r-m);
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
transition:background var(--duration);
min-width:0;
}
.city:hover{
background:#2C3136;
color:#F3F5F6;
}
.city>*{
min-width:0;
overflow-wrap:break-word;
}
.city .code{
grid-area:code;
align-self:center;
font-family:var(--f-mono);
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#9FDCF0;
letter-spacing:.1em;
}
.city b{
grid-area:name;
font-family:var(--f-head);
font-size:var(--text-lg);
line-height:1.25;
font-weight:800;
}
.city span.hint{
grid-area:hint;
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#B5BEC4;
}
.on-sale{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.4em;
width:fit-content;
padding:.4em .9em;
border-radius:var(--r-p);
background:#39464E;
color:#BDE7F5;
font-size:var(--text-xs);
line-height:1;
font-weight:700;
}
.city .on-sale{
grid-area:sale;
justify-self:end;
align-self:center;
}
.nodes .table-scroll{
margin-top:var(--space-4);
border-radius:0;
}
.matrix{
display:table;
min-width:700px;
width:100%;
border-collapse:collapse;
font-size:var(--text-sm);
background:#22262A;
color:#F3F5F6;
}
.matrix th,.matrix td{
padding:var(--space-2) var(--space-3);
text-align:left;
border-bottom:1px solid rgba(243,245,246,.12);
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#F3F5F6;
overflow-wrap:break-word;
}
.matrix th:first-child{
min-width:16rem;
}
.matrix thead th{
font-family:var(--f-mono);
font-size:var(--text-xs);
letter-spacing:.06em;
color:#B5BEC4;
font-weight:500;
}
.matrix tbody th{
font-weight:500;
}
.matrix td.ok::before{
content:"";
display:inline-block;
width:7px;
height:7px;
border-radius:50%;
background:#6FC3DF;
margin-right:10px;
vertical-align:1px;
}
.note-line{
margin-top:var(--space-3);
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#B5BEC4;
}
.choose{
background:#F1EEE7;
color:#22262A;
--mute-l:#555B60;
--hair-l:rgba(34,38,42,.14);
}
.choose .sec-head p{
color:#55554E;
}
.cmp{
display:table;
min-width:850px;
width:100%;
border-collapse:separate;
border-spacing:0;
font-size:var(--text-sm);
background:#F1EEE7;
color:#22262A;
}
.cmp th,.cmp td{
padding:var(--space-3);
text-align:left;
vertical-align:top;
border-top:1px solid rgba(34,38,42,.12);
font-size:var(--text-sm);
line-height:1.6;
color:#22262A;
}
.cmp thead th{
border-top:0;
font-family:var(--f-mono);
font-size:var(--text-xs);
letter-spacing:.06em;
color:#55554E;
font-weight:500;
padding-top:0;
}
.cmp tbody th{
font-family:var(--f-head);
font-size:var(--text-base);
font-weight:800;
width:22%;
min-width:180px;
}
.cmp td{
color:#3B3A36;
}
.cmp tr.us td,.cmp tr.us th{
background:#22262A;
color:#F3F5F6;
border-top-color:rgba(243,245,246,.12);
}
.cmp tr.us th{
border-radius:var(--r-m) 0 0 var(--r-m);
}
.cmp tr.us td:last-child{
border-radius:0 var(--r-m) var(--r-m) 0;
}
.cmp tr.us td b{
color:#9FDCF0;
font-family:var(--f-mono);
font-weight:600;
}
.callout{
margin-top:var(--space-4);
display:flex;
align-items:center;
gap:var(--space-3);
padding:var(--space-3) 32px;
border-radius:var(--r-m);
background:#FFFFFF;
color:#22262A;
--mute-l:#555B60;
--hair-l:rgba(34,38,42,.14);
}
.callout b{
font-family:var(--f-head);
font-size:var(--text-base);
line-height:var(--leading-small);
font-weight:800;
}
.callout span{
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#555B60;
}
.callout .link{
margin-left:auto;
color:#22262A;
flex-shrink:0;
}
.price{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.price-card{
display:grid;
grid-template-columns:minmax(0,7fr) minmax(0,5fr);
gap:0;
border-radius:var(--r-m);
overflow:hidden;
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.price-main{
padding:var(--space-4);
min-width:0;
}
.price-main .model{
display:flex;
align-items:baseline;
gap:var(--space-2);
flex-wrap:wrap;
}
.price-main .model .mono{
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#B5BEC4;
}
.periods{
margin-top:var(--space-4);
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
.periods div{
padding:var(--space-3);
border-radius:var(--r-s);
background:#22262A;
color:#F3F5F6;
min-width:0;
}
.periods div.first{
background:#F3F5F6;
color:#22262A;
}
.periods b{
display:block;
font-family:var(--f-mono);
font-size:var(--text-lg);
font-weight:600;
line-height:1.2;
overflow-wrap:break-word;
}
.periods span{
display:block;
margin-top:var(--space-1);
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#B5BEC4;
}
.periods div.first span{
color:#555B60;
}
.addons{
margin-top:var(--space-3);
display:flex;
gap:12px;
flex-wrap:wrap;
font-size:var(--text-sm);
}
.addons a{
padding:var(--space-1) var(--space-2);
border-radius:var(--r-p);
background:#2C3136;
color:#F3F5F6;
border:1px solid rgba(243,245,246,.24);
font-size:var(--text-sm);
line-height:var(--leading-small);
}
.addons a .mono{
color:#9FDCF0;
font-size:var(--text-xs);
margin-left:6px;
}
.price-foot{
margin-top:var(--space-4);
display:flex;
align-items:center;
gap:var(--space-3);
}
.price-foot small{
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#B5BEC4;
}
.price-card>.spec-sheet{
background:#ECEAF1;
color:#22262A;
--mute-l:#55535E;
--hair-l:rgba(34,38,42,.14);
padding:var(--space-4);
display:flex;
flex-direction:column;
gap:var(--space-3);
min-width:0;
border-radius:0;
}
.spec-sheet .plate-head{
display:flex;
justify-content:space-between;
gap:var(--space-2);
font-family:var(--f-mono);
font-size:var(--text-xs);
line-height:var(--leading-small);
letter-spacing:.1em;
color:#55535E;
padding-bottom:var(--space-2);
border-bottom:1px solid rgba(34,38,42,.14);
}
.price-card>.spec-sheet dl{
display:grid;
margin:0;
}
.price-card>.spec-sheet dl div{
display:grid;
grid-template-columns:minmax(7.5rem,9rem) minmax(0,1fr);
gap:var(--space-2);
padding:var(--space-2) 0;
border-bottom:1px solid rgba(34,38,42,.14);
}
.price-card>.spec-sheet dt{
font-family:var(--f-mono);
font-size:var(--text-xs);
line-height:var(--leading-small);
color:#55535E;
letter-spacing:.04em;
min-width:0;
overflow-wrap:break-word;
}
.price-card>.spec-sheet dd{
font-size:var(--text-sm);
line-height:var(--leading-body);
font-weight:700;
color:#22262A;
min-width:0;
overflow-wrap:break-word;
}
.spec-sheet .serial{
margin-top:auto;
font-family:var(--f-mono);
font-size:var(--text-xs);
line-height:var(--leading-small);
color:#55535E;
}
.cases{
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.case-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-2);
align-items:stretch;
}
.case{
display:grid;
grid-template-columns:56px minmax(0,1fr) auto;
gap:var(--space-3);
align-items:start;
padding:var(--space-3) 32px;
border-radius:var(--r-m);
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
transition:background var(--duration);
min-width:0;
height:100%;
}
.case:hover{
background:#22262A;
color:#F3F5F6;
}
.case>div{
min-width:0;
}
.case .ix{
width:56px;
height:56px;
border-radius:var(--r-s);
background:#414951;
color:#9FDCF0;
display:flex;
align-items:center;
justify-content:center;
}
.case .ix svg{
width:24px;
height:24px;
}
.case h3{
font-size:var(--text-card);
line-height:1.25;
}
.case p{
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#B5BEC4;
margin-top:var(--space-1);
}
.case .go{
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#9FDCF0;
font-weight:700;
}
.quote{
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
padding:0 0 var(--space-6);
}
.quote-card{
display:grid;
grid-template-columns:96px minmax(0,1fr) 120px;
gap:var(--space-4);
align-items:center;
padding:var(--space-4) var(--space-5);
border-radius:var(--r-m);
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.quote-card>div{
min-width:0;
}
.quote-card .avatar{
width:96px;
height:96px;
}
.quote-card blockquote{
font-size:var(--text-base);
line-height:1.8;
color:#E7ECEF;
}
.quote-card cite{
display:block;
margin-top:var(--space-2);
font-style:normal;
font-weight:700;
font-size:var(--text-sm);
line-height:var(--leading-small);
color:#F3F5F6;
}
.quote-card .qm{
font-family:var(--f-head);
font-size:4rem;
line-height:1.15;
color:#A3ACB2;
text-align:right;
}
.steps{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.step-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--space-3);
align-items:stretch;
}
.step{
padding:var(--space-4) 32px;
border-radius:var(--r-m);
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
min-width:0;
}
.step .n{
display:inline-flex;
align-items:center;
font-family:var(--f-mono);
font-size:var(--text-xs);
line-height:var(--leading-small);
color:#9FDCF0;
letter-spacing:.1em;
margin-bottom:var(--space-3);
}
.step p{
margin-top:var(--space-1);
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#B5BEC4;
}
.steps .more{
margin-top:var(--space-4);
color:#F3F5F6;
}
.pay{
background:#ECEAF1;
color:#22262A;
--mute-l:#55535E;
--hair-l:rgba(34,38,42,.14);
padding:var(--space-5) 0;
}
.pay .wrap{
display:grid;
grid-template-columns:minmax(0,4fr) minmax(0,7fr);
gap:var(--space-5);
align-items:center;
}
.pay .kicker{
margin-bottom:var(--space-2);
}
.pay h2{
font-size:var(--text-card);
line-height:1.25;
}
.pay p{
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#55535E;
margin-top:var(--space-1);
}
.pay-row{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:flex-end;
}
.pay-row span{
display:flex;
align-items:center;
gap:10px;
padding:var(--space-2) var(--space-3);
border-radius:var(--r-s);
background:#FFFFFF;
color:#22262A;
font-weight:700;
font-size:var(--text-sm);
line-height:var(--leading-small);
max-width:100%;
}
.pay-row span small{
font-weight:500;
color:#55535E;
font-size:var(--text-xs);
line-height:var(--leading-small);
}
.pay-row span.usd{
background:#22262A;
color:#F3F5F6;
font-family:var(--f-mono);
font-weight:600;
}
.faq{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.faq-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 var(--space-5);
}
.faq-item{
padding:var(--space-3) 0;
border-top:1px solid rgba(243,245,246,.12);
min-width:0;
}
.faq-item h3{
font-size:var(--text-base);
line-height:1.4;
font-family:var(--f-head);
font-weight:800;
}
.faq-item p{
margin-top:var(--space-1);
font-size:var(--text-sm);
line-height:var(--leading-body);
color:#B5BEC4;
}
.home-closing{
background:#22262A;
color:#F3F5F6;
padding-block:var(--space-5) var(--space-close);
}
.home-closing>.container>.c-closing{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:var(--space-4);
width:100%;
margin:0;
padding:var(--space-5);
border-radius:var(--r-m);
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.home-closing .c-closing-copy{
text-align:left;
min-width:0;
}
.home-closing .c-closing-copy h2{
font-size:var(--text-section);
line-height:var(--leading-title);
color:#F3F5F6;
}
.home-closing .c-closing-copy p{
margin-top:var(--space-2);
font-size:var(--text-base);
color:#B5BEC4;
}
.home-closing .c-closing>.c-actions{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:var(--space-2);
margin-top:var(--space-3);
}
.home-blog{
background:#22262A;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
}
.home-page main>.home-blog:last-child{
padding-bottom:var(--space-close);
}
.home-blog__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
gap:var(--space-3);
align-items:stretch;
}
.home-blog__card{
display:flex;
flex-direction:column;
gap:var(--space-3);
height:100%;
padding:var(--space-3);
border-radius:var(--r-m);
background:#2C3136;
color:#F3F5F6;
--mute-d:#B5BEC4;
--hair-d:rgba(243,245,246,.12);
min-width:0;
}
.home-blog__card .pill{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.4em;
width:fit-content;
padding:.4em .9em;
border-radius:var(--r-p);
background:#ECEAF1;
color:#22262A;
font-size:var(--text-xs);
line-height:1;
}
.home-blog__card h3{
font-size:var(--text-card);
line-height:1.25;
}
.home-blog__card p{
font-size:var(--text-sm);
color:#B5BEC4;
}
.home-blog__empty{
padding:var(--space-3);
border-radius:var(--r-m);
background:#2C3136;
color:#F3F5F6;
}
.home-page .home-blog [hidden]{
display:none!important;
}
@keyframes home-gradient{
from{background-position:0% 50%}
to{background-position:100% 50%}
}
@media(max-width:64rem){
.home-page .hero-inner{
grid-template-columns:minmax(0,1fr);
}
.pair-grid,.sla-grid,.solo-split,.price-card,.pay .wrap{
grid-template-columns:minmax(0,1fr);
}
.pair-fig figcaption{
flex-wrap:wrap;
}
.case-list{
grid-template-columns:minmax(0,1fr);
}
.hero-band .wrap{
flex-wrap:wrap;
padding-block:var(--space-3);
gap:var(--space-3);
}
.band-note{
margin-left:0;
width:100%;
}
.callout{
flex-wrap:wrap;
}
.callout .link{
margin-left:0;
}
.quote-card{
grid-template-columns:96px minmax(0,1fr);
padding:var(--space-4);
}
.quote-card .qm{
display:none;
}
.step-grid{
grid-template-columns:minmax(0,1fr);
}
.pay-row{
justify-content:flex-start;
}
.home-closing>.container>.c-closing{
padding:var(--space-4);
}
.periods{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:42rem){
.home-page .hero-inner{
align-items:start;
}
.home-page .hero h1{
line-height:1.15;
}
.home-page .hero .hero-art[data-hero-face="confirmed-draft"]{
width:min(calc(100% - var(--gutter)*2),100%);
margin-inline:auto;
height:auto;
overflow:visible;
transform:none;
grid-template-columns:minmax(0,1fr);
}
.home-page .hero .hero-art>.queue-card,
.home-page .hero .hero-art>.runner-card,
.home-page .hero .hero-art>.float-card{
grid-column:1;
width:auto;
height:auto;
}
.home-chart-labels{
gap:var(--space-1);
font-size:.5rem;
}
.home-overnight{
margin-block:var(--space-2);
}
.pair-fig .stage{
height:auto;
min-height:280px;
padding:var(--space-3);
}
.pair-fig .hardware-diagram,.pair-fig .desktop-diagram{
width:100%;
height:auto;
}
.home-hardware-chip,
.home-hardware-led,
.home-hardware-top,
.home-hardware-front{
font-size:clamp(.5rem,2.2vw,.75rem);
}
.home-hardware-chip,.home-hardware-led{
gap:4px;
}
.home-desktop-menu,
.home-desktop-upload,
.home-desktop-client{
font-size:clamp(.35rem,1.8vw,.5rem);
}
.pair-fig figcaption{
padding:var(--space-3);
}
.sla-num{
padding:var(--space-3);
}
.kv>div{
grid-template-columns:minmax(0,1fr);
gap:var(--space-1);
}
.win-white,.win-dark,.price-main,.price-card>.spec-sheet{
padding:var(--space-3);
}
.alloc-row{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
gap:var(--space-1);
}
.trade{
align-items:flex-start;
padding:var(--space-3);
}
.city{
grid-template-columns:3.25rem minmax(0,1fr);
grid-template-areas:"code name" "code hint" ". sale";
padding:var(--space-3);
column-gap:12px;
row-gap:.25rem;
}
.city .on-sale{
justify-self:start;
margin-top:.35rem;
}
.periods div{
padding:var(--space-3);
}
.price-foot{
flex-wrap:wrap;
}
.price-card>.spec-sheet dl div{
grid-template-columns:minmax(0,1fr);
gap:var(--space-1);
}
.case{
grid-template-columns:56px minmax(0,1fr);
padding:var(--space-3);
gap:var(--space-2);
}
.case .go{
grid-column:2;
}
.quote-card{
grid-template-columns:minmax(0,1fr);
padding:var(--space-3);
gap:var(--space-3);
}
.quote-card .avatar{
width:64px;
height:64px;
}
.faq-grid{
grid-template-columns:minmax(0,1fr);
}
.owner div{
flex-wrap:wrap;
}
.home-closing>.container>.c-closing{
grid-template-columns:minmax(0,1fr);
padding:var(--space-3);
gap:var(--space-3);
}
.home-closing .c-closing>.c-actions{
align-items:flex-start;
justify-content:flex-start;
}
}
@media(prefers-reduced-motion:reduce){
.home-page .hero[data-hero-form="gradient-motion"]{
animation:none;
}
}